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

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.

  • bgrggfe

    Do you know who is the prolocutor star of Louis Vuitton Handbags Online  now? It is the Sofia Coppola, she is well-know with the director of movies. Of course she like the LV very much ,especial the Louis Vuitton Wallet,but she never buy something from the Louis Vuitton outlet store, because she always get freely and show the newest louis vuitton items .

  • lauraine 2012

    Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 media player| youtube html5 player

  • Michael

    The sheer amount of ads on this site is horrible. Not a bad article, but I won’t be returning.

  • traci Stortz

    This is not working for me on Ipad….is there an update or a “hack” for ipad safari?

  • mitra

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

  • tener

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

  • http://www.wittysparks.com/ Sravan Kumar

    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!

  • Pingback: iCheck a jQuery plugin for custom Checkbox and Radiobuttons()

  • Thiago Nunes

    Hello, the markers do not appear in IE8, is there any fix for this problem?

    Thanks!

  • http://www.wittysparks.com/ Sravan Kumar

    Hi – thanks for dropping by – I will check and get back to you on this!

  • Thiago Nunes

    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!

  • Thiago Nunes

    Hi buddy, you have found a solution for the problem of markers on the IE8?

    Thanks!

  • Pingback: Personnalisation des cases à cocher par une image()