{"id":17819,"date":"2013-08-02T18:01:13","date_gmt":"2013-08-02T10:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17819"},"modified":"2025-04-04T01:35:39","modified_gmt":"2025-04-03T17:35:39","slug":"jquery-icheck","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/","title":{"rendered":"UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck"},"content":{"rendered":"<p>This article was first Published on: Aug 2, 2013.<\/p>\n<p>In a previous article, we discussed <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/\">how to customize checkbox and radio inputs using CSS<\/a>. However, this approach has limitations, especially when it comes to older versions of Internet Explorer. These browsers don\u2019t support the <code>:checked<\/code> pseudo-class, making the CSS method less universal.<\/p>\n<p>Today, we\u2019ll explore an alternative: a jQuery plugin called <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/dargullin\/icheck\">iCheck<\/a><\/strong>, which offers better browser compatibility.<\/p>\n<h2>Getting Started<\/h2>\n<p>To utilize <strong>iCheck<\/strong>, you\u2019ll need <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">jQuery<\/a> version 1.6 or newer. After including these libraries in your HTML file, add the following line to activate the plugin:<\/p>\n<pre>\r\n$('input').iCheck();\r\n<\/pre>\n<p>iCheck targets all <code>radio<\/code> and <code>checkbox<\/code> inputs, wrapping them in a <code>&lt;div&gt;<\/code> element. Other input types like <code>text<\/code> and <code>textarea<\/code> are ignored.<\/p>\n<pre>\r\n&lt;div class=\"iradio\"&gt;\r\n&lt;input type=\"radio\" id=\"radio\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"icheckbox\"&gt;\r\n&lt;input type=\"checkbox\" id=\"checkbox\"&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h2>Styling Inputs<\/h2>\n<p>iCheck also adds specific classes to the wrapper <code>&lt;div&gt;<\/code> based on conditions like <code>hover<\/code>, <code>checked<\/code>, and <code>focus<\/code>. You can use these classes for further customization:<\/p>\n<pre>\r\n&lt;div class=\"iradio checked hover\"&gt;\r\n&lt;input type=\"radio\" id=\"radio\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"icheckbox checked\"&gt;\r\n&lt;input type=\"checkbox\" id=\"checkbox\"&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h2>Pre-Made Skins<\/h2>\n<p>If you\u2019re not a CSS expert, don\u2019t worry. The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/damirfoy\/\">creator of iCheck<\/a> has provided several attractive skins in various colors.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-icheck\/skin.jpg\" width=\"500\" height=\"179\" alt=\"iCheck Skins\"><\/figure>\n<p>To use a skin, simply link the corresponding stylesheet in your HTML document. For example, to use the Square skin:<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\" href=\"css\/square\/orange.css\"&gt;\r\n<\/pre>\n<h2>Advanced Customization<\/h2>\n<p>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 <code>handle<\/code> option:<\/p>\n<pre>\r\n$('input').iCheck({\r\nhandle: 'radio'\r\n});\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>In summary, if you\u2019re concerned about browser compatibility, iCheck is a fantastic jQuery plugin that offers beautiful, ready-to-use skins and customizable options. It\u2019s a lightweight solution for enhancing your UI design.<\/p>\n<p>Interested? Check out iCheck on its <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/dargullin\/icheck\">official GitHub page<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>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\u2019t support the :checked pseudo-class, making the CSS method less universal. Today, we\u2019ll explore&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395,352],"tags":[4117,911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Customizing Checkbox and Radio Input with iCheck Plugin<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-02T10:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:35:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-icheck\/skin.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck\",\"datePublished\":\"2013-08-02T10:01:13+00:00\",\"dateModified\":\"2025-04-03T17:35:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/\"},\"wordCount\":269,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-icheck\\\/skin.jpg\",\"keywords\":[\"Javascripts\",\"jQuery\"],\"articleSection\":[\"UI\\\/UX\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/\",\"name\":\"Customizing Checkbox and Radio Input with iCheck Plugin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-icheck\\\/skin.jpg\",\"datePublished\":\"2013-08-02T10:01:13+00:00\",\"dateModified\":\"2025-04-03T17:35:39+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-icheck\\\/skin.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-icheck\\\/skin.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-icheck\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Customizing Checkbox and Radio Input with iCheck Plugin","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/","og_locale":"en_US","og_type":"article","og_title":"UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-08-02T10:01:13+00:00","article_modified_time":"2025-04-03T17:35:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-icheck\/skin.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck","datePublished":"2013-08-02T10:01:13+00:00","dateModified":"2025-04-03T17:35:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/"},"wordCount":269,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-icheck\/skin.jpg","keywords":["Javascripts","jQuery"],"articleSection":["UI\/UX","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/","name":"Customizing Checkbox and Radio Input with iCheck Plugin","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-icheck\/skin.jpg","datePublished":"2013-08-02T10:01:13+00:00","dateModified":"2025-04-03T17:35:39+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-icheck\/skin.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-icheck\/skin.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI Design: How to Easily Customize Checkbox and Radio Inputs Using iCheck"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Dp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17819"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17819\/revisions"}],"predecessor-version":[{"id":73619,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17819\/revisions\/73619"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17819"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}