UI Design: Customize Checkbox & Radio Input with iCheck

In our previous post, we have shown you how to 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, as the :checked pseudo-class is not supported in those browsers. So, it is not a perfect fit solution for every case.

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

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

Basic Usage

To run iCheck, we need jQuery 1.6 or newer, and once you have included these libraries in your HTML document, add this line to initialize the plugin functionality.

  $('input').iCheck();
  

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

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

Furthermore, iCheck will also append a class into the wrapper <div> upon certain conditions such as 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 can customize the input "look" using these classes in your stylesheet.

Skins

Well, not everyone is excellent in CSS. Fortunately, the iCheck’s author has provided several beautiful skins with a set of colors to choose. The following screenshot shows my favourite, Square skin.

The skins are provided along with the downloadable package. To use, simply link the appropriate stylehsheet like within your document. Given Square skin as the example, you can add the stylesheet as follows:

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

Replace the stylesheet name to one that is provided such as 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, you can use the Options provided to customize the markup that is generated by iCheck. Let’s say you only want to select and customize the radio input, you can specify it using the handle option, as follows.

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

icheckbox and iradio is the default class given in the div wrapper. But, we are allowed to change this class into something else by using the checkboxClass and radioClass. Here is an example:

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

In case these are not enough for you, you can further customize the ouput classes for input states ( such as hover, checked, focus, etc) by using:

• checkedClass
• disabledClass
• hoverClass
• focusClass

For me, the default value of these options is just fine, and I don’t see it require much changes for use.

Final Thought

As we mentioned earlier in this post, CSS technique might not be your best solution, particularly if older browsers are of concern. So, using a jQuery plugin may serve as the better option. All in all, iCheck is a great jQuery plugin with several ready-to-use and beautiful skins, customizable options, and lightweight.

So, what can we ask more for such a plugin? Head over to the official page to see it in action: iCheck.