Click here to Skip to main content
14,240,732 members

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

Rate this:
0.00 (No votes)
Please Sign up or sign in to vote.
0.00 (No votes)
18 May 2015CPOL


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
No Biography provided

Comments and Discussions

-- There are no messages in this forum --
Posted 18 May 2015