APS.NET Custom CheckBox CSS whitout javascript / Checkbox css personalizado sin javascript

Introduction

There is a way to customize the checkbox using only css and whitout javascript.

Using the code

An Asp:Checkbox is composed of a label and an input type check (In html). So you need to use a plus (+) selector in css:

 

input[type=checkbox] { display:none; } /*first hide check control*/

input[type=checkbox] + label:before { /*using font awesome for icons.*/
font-family: FontAwesome;
display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } /* icon when uncheck*/

input[type=checkbox]:checked + label:before { content: "\f046"; } /* icon when check*/

And that's it. You can use css classes just putting the class name first (something like .myCheck input[type=checkbox]...............). and then using it in CssClass property.

You must have this font to use it. You can use also image icons, just change content property, it can be whatever you want.