東京都新宿区のWeb制作会社 ウェブラボ株式会社

スタッフブログ

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

2014.10.21 Posted by

こんにちは。ウェブラボ技術メモも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では表示されない不具合が出ましたが配布元によると対応しているみたいです。

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278