jQueryプラグインicheck.jsを使って、きれいなcheck boxとradioボタンを実装します。あらかじめ6種類のskinが用意されていて、その内3種類には10個の色違いがあり、それぞれ個別のCSS、スプライト画像が付属しています。利用する際は、チェックボックス用、ラジオボタン用それぞれのCSSをscriptで指定します。使用する分のみのCSS、スプライト画像を設置する形になるので、1種類だけならごく軽量になります。

サンプル1 skinはflat-green

サンプル2 skinはsquare-blue

サンプル3 skinはminimal-pink

サンプルのCSS指定scriptのソース

$(document).ready(function(){
	$('#sample input').iCheck({
		checkboxClass: 'icheckbox_flat-green',
		radioClass: 'iradio_flat-green',
		increaseArea: '20%' // optional
	});
	$('#sample2 input').iCheck({
		checkboxClass: 'icheckbox_square-blue',
		radioClass: 'iradio_square-blue',
		increaseArea: '20%' // optional
	});
	$('#sample3 input').iCheck({
		checkboxClass: 'icheckbox_minimal-pink',
		radioClass: 'iradio_minimal-pink',
		increaseArea: '20%' // optional
	});
});