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

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Newsletter
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 K

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.

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
Previous Post: « A Futuristic Flying car, ‘The Transition’ launched!
Next Post: Will Weight Loss Surgery Cure Diabetes? »
Profile picture for Sravan K

About Sravan K

Contributor at 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 K

Primary Sidebar

Search

Exclusive Coupons

  • Moqups coupon code: WITTYSPARKS for 20% or PARTNERS50 for 50% discount.
  • WPForms coupon code: WITTYSPARKS for 50% off.
  • Serpstat coupon code: wittysparks_discount for 30% off.
  • SEO Buddy coupon code: WITTYSPARKS for 25% off.
  • Morningscore coupon code: wittysparks for 30% off for 3 months.
  • FlexClip coupon code: WITTYSPARKS for 30% off.
  • Uplead coupon code: “witty” for 30-day free trial.
  • FastestVPN coupon codes: WITTYSPARKS15 or WITTYSPARKS10 or Get up to 93% OFF.
  • Outranking.io coupon code: WITTYSPARKS50 for 50% off.

For more such offers visit our exclusive offers for SEO, Bloggers, Marketers and for Business owners.

Featured Productivity Software

Notion logo
Notion

Whether you’re a solo entrepreneur or a large team, Notion Workspace can help you stay organized and get more done. Get started today and take your productivity to the next level.

Try Notion for FREE

Footer

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 © 2023 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • LinkedIn
  • Twitter
  • Like
  • Pinterest