UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck

By . in UI/UX. Updated on .

This article was first Published on: Aug 2, 2013.

In a previous article, we discussed how to customize checkbox and radio inputs using CSS. However, this approach has limitations, especially when it comes to older versions of Internet Explorer. These browsers don’t support the :checked pseudo-class, making the CSS method less universal.

Today, we’ll explore an alternative: a jQuery plugin called iCheck, which offers better browser compatibility.

Getting Started

To utilize iCheck, you’ll need jQuery version 1.6 or newer. After including these libraries in your HTML file, add the following line to activate the plugin:

$('input').iCheck();

iCheck targets all radio and checkbox inputs, wrapping them in a <div> element. Other input types like text and textarea are ignored.

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

Styling Inputs

iCheck also adds specific classes to the wrapper <div> based on conditions like hover, checked, and focus. You can use these classes for further customization:

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

Pre-Made Skins

If you’re not a CSS expert, don’t worry. The creator of iCheck has provided several attractive skins in various colors.

iCheck Skins

To use a skin, simply link the corresponding stylesheet in your HTML document. For example, to use the Square skin:

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

Advanced Customization

For those looking for more control, iCheck offers several options for customization. For instance, if you only want to style radio inputs, you can specify this using the handle option:

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

Conclusion

In summary, if you’re concerned about browser compatibility, iCheck is a fantastic jQuery plugin that offers beautiful, ready-to-use skins and customizable options. It’s a lightweight solution for enhancing your UI design.

Interested? Check out iCheck on its official GitHub page.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail