• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Technology / Programming / Pure CSS3 Custom Checkbox and Radio buttons with Sprite Image

Pure CSS3 Custom Checkbox and Radio buttons with Sprite Image

Programming April 17, 2012 by Sravan Kumar Kandagatla

Being a designer and front-end developer, I always look for the minimal version of any script and which should not put much load on the website 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 a few KB’s which always matters in terms of page speed or load.

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

Do these CSS3 Custom Checkbox and Radio buttons work 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

download

I didn’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 these custom controls and continue to use them 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 the 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.

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • 18 Free Open Source CSS Dropdown Navigation Menus
  • CSS Front-end Responsive Frameworks and Grids Compared
  • Giveaway: 3 Jumpeye Framework Licenses for responsive websites

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Match 4 – IPL 2012 – Rajasthan Royals defeat Kings XI Punjab comprehensively at Jaipur Apr 6, 2012
Next Post: Will Weight Loss Surgery Cure Diabetes? »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for MichaelMichael says

    August 14, 2012 at 9:13 pm

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

  2. Profile picture for traci Stortztraci Stortz says

    August 21, 2012 at 6:39 pm

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

  3. Profile picture for mitramitra says

    September 3, 2012 at 7:06 pm

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

  4. Profile picture for tenertener says

    March 30, 2013 at 8:24 am

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

    • Profile picture for Sravan KumarSravan Kumar says

      March 30, 2013 at 8:31 am

      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!

  5. Profile picture for Thiago NunesThiago Nunes says

    July 24, 2013 at 12:32 am

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

    Thanks!

    • Profile picture for Sravan KumarSravan Kumar says

      July 24, 2013 at 6:52 am

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

      • Profile picture for Thiago NunesThiago Nunes says

        July 24, 2013 at 7:43 pm

        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!

      • Profile picture for Thiago NunesThiago Nunes says

        August 28, 2013 at 1:55 am

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

        Thanks!

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure