Pure CSS3 Custom Checkbox and Radio buttons with Sprite Image

Being a designer and Front-end developer, I always look for minimal version of any script and which should not put much load on the web site or web application I do. If I failed to search the minimal version – I try my best to crop the code and reduce at least few KB’s which always matters in terms of page speed or load.

I am sure this question is default which comes in your mind first, what’s that? Let me clear this before I go ahead.

Does this CSS3 Custom Checkbox and Radio buttons works in Internet Explorer?
The Answer is a BIG YES.

demo

download

I din’t do any IE specific hack or did a jQuery code, I thought instead of writing a huge code in jQuery I thought to use :Selectivizer – CSS3 pseudo-class and attribute selectors for IE 6 to 8. Selectivizr worked great for this custom controls and continue to use it in my projects from now onwards.

Actually my target was to make it Light Weight or minimal, Browser Compatible and mainly Tablet Friendly as well as Mobile Friendly etc.

These are the following Best Features of this Custom Checkbox and Radio buttons:

Most important and not to forget – It’s fully Browser Compatible

• Pure CSS3
• Provided a work around or Fix or Hack what ever you call for Internet Explorer
• Javascript (jQuery and Selectivizr) is required only for Internet Explorer, provided with conditional comments to cut down the load in other browsers
• Used Sprite Image for all the states of Custom Checkbox and Radio buttons
• Optimized image for faster load (Zip file includes Source file this sprite too)
• This Checkbox and Radio buttons example contains, Enabled and Disabled versions (I din’t included hover state or focus state as those are not required for tablets – focus might be required but made it simple with just font change)
• Works well in almost all the latest browsers like Internet Explorer, Firefox, Opera, Google Chrome, Safari etc.
• Tested in Android Mobile browsers and in Opera Mobile Browser, doesn’t work in Opera Mini though!
• And yoo works like a charm in almost all the browsers in Android Tablet – tested in Android Browser, Dolphin Browser, Firefox Beta, Chrome Beta and in Opera Mobile Browser for tablet.
• Also used -webkit-transform: translateZ(0); to make different states of this custom checkbox and radio button to switch faster.

Sounds interesting so far? Was wondering where is the code? Let me paste an overview of code:

HTML with Conditional Comments to make it work for IE:

<input id="checkbox1" name="checkbox1" checked="checked" type="checkbox" value="I am Checkbox 1" tabindex="1" /><label for="checkbox1">Checked by Default</label>

<input id="radio1" name="groupradio" checked="checked" type="radio" value="Radio 1" tabindex="5" /><label for="radio1">Checked by Default</label>

CSS:

input[type='radio'], input[type='checkbox']{opacity:0;position:absolute;filter:alpha(opacity=0);margin:5px 0 0 5px}
input[type='radio']:focus+label, input[type="checkbox"]:focus+label{color:#C30}
input[type="checkbox"]+label, input[type="radio"]+label{background:url('wittysparks_checkbox_radio.png') left top no-repeat;position:relative;margin:0;padding:0 0 0 50px;cursor:pointer;line-height:43px;min-height:43px;display:inline-block;z-index:0;font-size:30px;font-weight:bold}
input[type="checkbox"]+label{background-position:0 0}
input[type="radio"]+label{background-position:0 -200px}
input[type='checkbox']:checked+label{background-position:0 -100px}
input[type='radio']:checked+label{background-position:0 -300px}
input[type='checkbox']:disabled+label{background-position:0 -400px;color:#999}
input[type='radio']:disabled+label{background-position:0 -600px;color:#999} 
input[type='checkbox']:disabled:checked+label{background-position:0 -500px;color:#999}
input[type='radio']:disabled:checked+label{background-position:0 -700px;color:#999}

Love this? Then why not Pinterest It or Digg It or Like It or Tweet It or Plus It or Stumble It or Dzone It etc. :)

And let me know if you need any further enhancements or found any issues in using this Custom Checkbox and Radio buttons – let’s try to figure it out for you.

Further Reading...

iCheck a jQuery plugin for custom Checkbox and Radiobuttons

Pickadate.js – jQuery mobile friendly and lightweight date picker!

DateBox – A Date and Time Picker plugin using jQuery Mobile