UI Design: Customize Checkbox & Radio Input with iCheck

http://videohive.net/?ref=gimmegfx



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.

 $('input').iCheck(); 

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.


Skins

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


Title Post: UI Design: Customize Checkbox &#38; Radio Input with iCheck
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: SharedTutor

Thank you for visiting sharedtutor.com, If there is criticism and suggestions please leave a comment


thumbnail
About The Author

Someone who always wanted to know about the beauty of the world :)

0 comments