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.

Pure CSS3 Custom Checkbox and Radio buttons with Sprite Image
Pure CSS3 Custom Checkbox and Radio buttons with Sprite Image



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>


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.

Published by Sravan Kumar

A Creative Web Designer, Developer, User Interface and User Experience Expert.

Join the Conversation


  1. The given demo is working on IE8 but after downloading the files its not working in IE8. plz correct the download package.

  2. It worked.I changed ‘input[type=’radio’]{display:none;}’->’input[type=’radio’]{display:block;}’

    1. Glad it worked for you after this change – but not sure in which browser you were facing problem due to this – so that I can review and make the changes accordingly!

      1. Cool, because i not found anything similar that works in all versions of IE. Would be cool the possibility to solve this problem.

        Thanks again!

  3. Pingback: Personnalisation des cases à cocher par une image
Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Thank you for sharing the article across social media. You can follow us in these paltforms to receive latest updates from WittySparks.

Send this to a friend