フォームでよく使うチェックボックスやラジオボタンを、簡単にカスタマイズできるプラグイン「iCheck.js」をご紹介します。
利用方法は簡単で、通常通りマークアップされたチェックボックスやラジオボタンに対して、.iCheck()メソッドを呼び出すだけです。同梱されているスキンの種類が豊富で、そのまま利用することも、自分でカスタマイズすることもできます。

iCheck

まずは上記サイトからプラグインをダウンロードします。

・html
特別な属性などを指定する必要はありません。


・JavaScript

$('input').iCheck({
 checkboxClass: 'icheckbox_minimal-red', // チェックボックスにclass名を追加
 radioClass: 'iradio_minimal-red' // ラジオボタンにclass名を追加
});

カスタマイズするinput要素に対して.iCheck()メソッドを呼び出します。
（上記は、プラグイン付属のスキンMinimalのredを利用する場合の記述方法です。）

<script src="jquery.js"></script>
<script src="jquery.icheck.js"></script>
<link href="skins/minimal/red.css" rel="stylesheet">

また、付属のスキンを利用する場合はjQuery本体とプラグインのほかにCSSも読み込む必要があります。

Minimal, Square, Flat, Line, Polaris, Futurico の６タイプのスキンがあり、サイト上でデザインを見ることができます。