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.
via hongkiat.com http://rss.feedsportal.com/c/35261/f/656072/s/2f788cc6/sc/4/l/0L0Shongkiat0N0Cblog0Cjquery0Eicheck0C/story01.htm