4

Is there any way to change the style ui of the asp.net checkbox. I tried this:

.cabeceraCheckBoxNormal
{
    background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
    clear:left;
    margin:0;
    padding:0;
}

but the result is not what i looking for. Because the image appears near the control, and i can see the normal style near the image. Like thisenter image description here

Edit: I decided to inspect the html generated and I saw that the ID set on asp checkbox is set to a span, and inside this is the input type checkbox... so I change the style to this:

input[type="checkbox"]
{
    background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
    background-position: 3px 2px;
    display:block;
    clear:left;
    margin:0;
    padding:0;
}

But nothing happens

jcvegan
  • 3,111
  • 9
  • 43
  • 66
  • possible duplicate of [Change Style/Look of Asp:CheckBox using CSS](http://stackoverflow.com/questions/112883/change-style-look-of-aspcheckbox-using-css) – Forgotten Semicolon Jan 17 '12 at 17:50
  • Checkboxes are browser dependent. I tried something as simple as setting borders and found it only worked in a couple of browsers. You can embed the checkbox in a
    and adorn it.
     – ron tornambe Jan 17 '12 at 17:51
  • Check out the following link [http://www.thecssninja.com/css/custom-inputs-using-css](http://www.thecssninja.com/css/custom-inputs-using-css) [Demo](http://www.thecssninja.com/demo/css_custom-forms/legacy/) – santosh singh Jan 17 '12 at 17:53

1 Answers1

4

By far the best way to get a customised checkbox effect is to add a <label> element linked with the checkbox via the for attribute. Then hide the checkbox and style the label's before pseudo-element as your checkbox instead.

Something like this:

<input type='checkbox' id='myCheck'><label for='myCheck'>Magic!</label>

with css:

#myCheck { visibility: hidden; }

input[type=checkbox] + label::before {
    display:block;
    content:url('ig_checkbox_off.gif');
    position:relative;
}
input[type=checkbox]:checked + label::before {
    content:url('ig_checkbox_on.gif');
}

I've created a jsFiddle example to demonstrate: http://jsfiddle.net/f9tLemyy/

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • You can style the checkbox this way, sure - but if you add `runat=server` into the checkbox element (to get it into the server-side code) the image does not get replaced when you click on the checkbox. With the server having a hold on the control, it only checks/unchecks if the control is visible. – bgmCoder Nov 13 '20 at 16:49