Custom Design ASP.NET Template

Question

Is there a way to change the ui style 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 the one I am looking for. As the image appears near the control, and I see a normal style next to the image. Like this

Edit: I decided to check the html created, and I saw that the identifier set on the asp flag is set to a range, and a type is entered inside this flag ... 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

Answer 1

Most likely, the best way to get a custom flag is to add the <label> element associated with the flag using the for attribute. Then hide the flag and create an alias labeled before as your flag.

Something like that:

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

using 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 created a jsFiddle example to demonstrate: http://jsfiddle.net/f9tLemyy/

Hope this helps.