jQueryプラグイン『iCheck』を使ってカッコいいチェックボックス、ラジオボタンを作る

こんにちは。ウェブラボ技術メモも6回目となりました。

普段webサイトを制作していると、チェックボックスやラジオボタンなどはデフォルトのものから変更できないものと思い込んでしまう人もいるかと思います。恥ずかしながら私もそうでした。

ところが、実はJQueryでカスタマイズすることが可能なのです。

そこで、今回はjQueryプラグイン『iCheck』を使ってカッコいいチェックボックス、ラジオボタンを作ってみたいと思います。

『iCheck』

今回もjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。また、CSSもプラグインと一緒に用意されているので一緒に読み込ませます。

■HTML head内

HTMLは、head内のscriptで指定した値を忘れずに付与してあげましょう。今回はクラスtype01。

これでtype01内のinput要素に反映されるようになります。

■HTML

完成したデモはこちらです。

デフォルトのチェックボックスやラジオボタンより数段カッコ良くなりました。

※IE8~、firefox、Chrome、Safariで動作確認済み。今回IE6,7では表示されない不具合が出ましたが配布元によると対応しているみたいです。

また、オプションで他にも数種類のデザイン・色が用意されているのでより好きなものを選択することが可能です。主に入力フォームのユーザビリティを向上などの用途に使用するのが良いかと思います。

以上、今回のテーマは「チェックボックス、ラジオボタンのカスタマイズ」でした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。