CSS based 'Custom checkbox and radio buttons'

Ryan "the CSS Ninja" come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. <p> <input type="radio" value="male" id="male" name="gender" /> <label for="male">Male</label> </p> p:not(#foo) > input + label:before { […]

Share online:

Ryan "the CSS Ninja" come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers.

<p>
<input type="radio" value="male" id="male" name="gender" />
<label for="male">Male</label>
</p>
p:not(#foo) > input + label:before
{
background: url(gr_custom-inputs.png) 0 -1px no-repeat;
position: absolute;
z-index: 2;
left: 16px;
content: "\00a0\00a0\00a0"; /* 3x &nbsp; */    overflow: hidden;
width: 16px;
height: 16px;
margin: 0 3px 0 -16px;
}

More info: Custom radio and checkbox inputs using CSS

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.