UI Design: Customize Checkbox & Radio Input with iCheck

In our previous post, we've got shown you how you can customize checkbox and radio input using CSS. One constraint from this technique,...

In our previous post, we've got shown you how you can customize checkbox and radio input using CSS. One constraint from this technique, however, is browser compatibility. The effect will not appear in Internet Explorer 8 and earlier IE versions, since the :checked pseudo-class is just not supported in those browsers. So, it is not a perfect fit solution for every case.

Today, we are going to explore another path to achieve a similar result by using a jQuery plugin called iCheck.

Building A Step-By-Step Guide Using Intro.js [Tutorial]

Basic Usage

To run iCheck, we require jQuery 1.6 or newer, as soon as you have included these libraries with your HTML document, add this line to initialize the plugin functionality.


iCheck will search for each and every radio and checkbox, and wrap them within a <div> element. The other input elements like text and textarea will probably be simply ignored.

 <div class="iradio"> <input type="radio" id="radio"> </div> <div class="icheckbox"> <input type="checkbox" id="checkbox"> </div> 

Furthermore, iCheck will even append a class to the wrapper <div> upon certain conditions including hover, checked and focus, like so:

 <div class="iradio checked hover"> <input type="radio" id="radio"> </div> <div class="icheckbox checked"> <input type="checkbox" id="checkbox"> </div> 

From this point, you'll be able to customize the input "look" with such classes inside your stylesheet.


Well, few are excellent in CSS. Fortunately, the iCheck’s author has provided several beautiful skins using a set of colors to select. The following screenshot shows my favourite, Square skin.

The skins are supplied along with the downloadable package. To use, simply link the proper stylehsheet like in your document. Given Square skin because example, you are able to add the stylesheet as follows:

 <link rel="stylesheet" href="css/square/orange.css"> 

Replace the stylesheet name to at least one that is provided like blue.css, pink.css, and red.css to change the color. Best of all, these skins are retina-ready, meaning that it looks great in both normal and high-resolution screen.

Further Customization

For more advanced users, it is possible to use the Options provided to change the markup that is generated by iCheck. Let’s say you should only want to select and get a new radio input, you are able to specify it while using handle option, as follows.

 $('input').iCheck( handle: 'radio' );

icheckbox and iradio could be the default class given in the div wrapper. But, we have been allowed to change this class into something else by using the checkboxClass and radioClass. Here is a sample:

 $('input').iCheck( checkboxClass: 'mycheckbox', radioClass: 'myradio' );

In case these aren't enough for you personally, it is possible to further get a new ouput classes for input states ( such as hover, checked, focus, etc) by utilizing:

  • checkedClass

  • disabledClass

  • hoverClass

  • focusClass

For me, the default price of these options is merely fine, and I don’t view it require much changes for usage.

Final Thought

As we mentioned earlier in this post, CSS technique may not be your best solution, specially if older browsers are or worry. So, utilizing a jQuery plugin may serve because better option. All in all, iCheck is an excellent jQuery plugin with several ready-to-use and delightful skins, customizable options, and lightweight.

So, exactly what do we ask more for a real plugin? Head over to the state page to view it in action: iCheck.

Related posts:

  1. UI Design: Customize Checkboxes and Radio Buttons with CSS3

  2. A Look Into HTML5 Forms Input Types: Date, Color and Range

  3. [Freebie] Vintage Radio Vector Icons

  4. Web Design: Hide / Show Notification Bar With CSS3






blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
SharedTutor Tutorials For Everyone: UI Design: Customize Checkbox &#38; Radio Input with iCheck
UI Design: Customize Checkbox &#38; Radio Input with iCheck
SharedTutor Tutorials For Everyone
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy