こんにちは。ウェブラボ技術メモも6回目となりました。
普段webサイトを制作していると、チェックボックスやラジオボタンなどはデフォルトのものから変更できないものと思い込んでしまう人もいるかと思います。恥ずかしながら私もそうでした。
ところが、実はJQueryでカスタマイズすることが可能なのです。
そこで、今回はjQueryプラグイン『iCheck』を使ってカッコいいチェックボックス、ラジオボタンを作ってみたいと思います。
『iCheck』今回もjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。また、CSSもプラグインと一緒に用意されているので一緒に読み込ませます。
■HTML head内
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="icheck.min.js"></script>
<link type="text/css" href="skins/all.css" rel="stylesheet" media="all" />
<script>
$(document).ready(function(){
$('.type01 input').iCheck({ //要素の指定
checkboxClass: 'icheckbox_square-red', //チェックボックスのデザインや色を指定します。
radioClass: 'iradio_square-blue' //ラジオボタンのデザインや色を指定します。
});
</script>
HTMLは、head内のscriptで指定した値を忘れずに付与してあげましょう。今回はクラスtype01。
これでtype01内のinput要素に反映されるようになります。■HTML
<div class="type01"> <ul> <li><label><input type="checkbox" name="" id="" /> test</label></li> <li><label><input type="checkbox" name="" id="" checked disabled/> test(Disabled & checked)</label></li> <li><label><input type="radio" name="type" id="" /> test</label></li> <li><label><input type="radio" name="type" id="" /> test</label></li> </ul> </div>
完成したデモはこちらです。
デフォルトのチェックボックスやラジオボタンより数段カッコ良くなりました。
※IE8～、firefox、Chrome、Safariで動作確認済み。今回IE6,7では表示されない不具合が出ましたが配布元によると対応しているみたいです。
また、オプションで他にも数種類のデザイン・色が用意されているのでより好きなものを選択することが可能です。主に入力フォームのユーザビリティを向上などの用途に使用するのが良いかと思います。
以上、今回のテーマは「チェックボックス、ラジオボタンのカスタマイズ」でした。