asp.CheckBox on render shows up inside span. Styles attributes end up on span, not checkbox

Question

My asp.net checkbox ends up with a span around it. Setting the width and height to 30px doesn't change the checkbox in both full browser or collapsed into smart phone size. The checkbox is in a navbar. Everything works and collapses, I just can't change the style of the checkbox.

Starts out here:

<li>
    <asp:CheckBox ID="chkInflate" Style="width: 30px !important; height: 30px !important;
        margin-bottom: 5px;" class="form-control" EnableViewState="True" AutoPostBack="True"
        BackColor="#f6f2dc" ForeColor="Black" runat="Server" ToolTip="Check/Uncheck the box to have all the names expand with more info on this web page. Or go over and click on an event name to pop up a whole bunch of information.">
    </asp:CheckBox></li>
<li>

Inspect HTML in Chrome shows the size is assigned to the span. Not sure how to make the "chkInflate" hold the new size.

<span  class="form-control" style="color:Black;background-color:#F6F2DC;width: 30px !important;height: 30px !important;margin-bottom: 5px;"><input id="chkInflate" type="checkbox" name="chkInflate" onclick="javascript:setTimeout('__doPostBack(\'chkInflate\',\'\')', 0)"></span>

<input id="chkInflate" type="checkbox" name="chkInflate" onclick="javascript:setTimeout('__doPostBack(\'chkInflate\',\'\')', 0)">

</span>

My desire is a larger checkbox on both un-collapsed and collapsed display

See http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css — VDWWD, Aug 18 '16 at 19:02
@ManishGoswami, no that doesn't work. I'm trying to go "inside" not outside the checkbox even farther. Currelty, it is styling the outside span of the checkbox. — JustJohn, Aug 18 '16 at 22:55
@VDWWD, I doubt this will change the size since it's using a Sprite with images of checkboxes. The problem as shown in my question is that the asp.net adds a span around the checkbox input and assigns the style to the span, not the checkbox. I did find something that looks promising by someone who understands what asp.net is doing. I can't wait to try it when I get home tonight. Supposedly, I need to target span.CheckBox input {} http://stackoverflow.com/questions/112883/change-style-look-of-aspcheckbox-using-css — JustJohn, Aug 18 '16 at 23:01
In the question there is a link to http://jsfiddle.net/0qjozqtc/1/. This example does not use sprites but a font. You can make the font as big as you want. — VDWWD, Aug 19 '16 at 07:55

score 0 · Answer 1 · answered Aug 18 '16 at 09:21

0

Use css instead of assigning the height and width to the checkbox control directly.

 input[type="checkbox"]{
  width: 30px; 
  height: 30px; 
}

answered Aug 18 '16 at 09:21

Vaishali

117
1
2
9

I am already doing that to other checkboxes on my form and it works as expected. However, the navbar/asp.net control checkbox doesn't. – JustJohn Aug 18 '16 at 22:54
Can I know whether the other checkboxes which worked in your form are html controls or the same asp.net controls. – Vaishali Aug 19 '16 at 03:49
the other checkboxes are html controls. Which makes sense why straight CSS works. I answered my own question with something I found. – JustJohn Aug 19 '16 at 06:42

score 0 · Answer 2 · edited May 23 '17 at 10:28

My G-O-O-G-L-E keys are worn down but I stumbled on this SO gem:

$(document).ready(function () {

    $('.form-control > input').addClass("biggercheckbox");

  })

I wanted the form-control around the textbox, and then after rendering jQuery added the "biggercheckbox" class to the rendered html checkbox (width:30px;height:30px). It worked with just the one "biggercheckbox" class for both, but I liked how the form-control class shouldered up against the other inputs with form-control classes.

You can use the child selector > in jQuery, because the wrapping span has the CssClass that you specified, and one input child.

asp.CheckBox on render shows up inside span. Styles attributes end up on span, not checkbox

2 Answers2