Blog

チェックボックス、ラジオボタン、セレクトボックスをカスタマイズしてカッコよくするjQueryプラグイン

普段、webサイトを制作していると、
チェックボックスやラジオボタン、セレクトボックスはブラウザのデフォルトのものしており、
しばらくは変更できないものだと思ってました。

でも、今はもうそんなことはないみたいで、
いろいろカスタマイズできるプラグインなんかがけっこうあるみたいですね。

その中から、チェックボックスやラジオボタンをカスタマイズできるものと、
セレクトボックスをカスタマイズできるものを紹介します。

簡単ですが、
デモも作成していますので、ぜひご覧ください。

DEMO

 

チェックボックスやラジオボタンをカスタマイズできるjQueryプラグイン『iCheck』

iCheckというプラグインですが、
まずは、
iCheck
から一式ダウンロードします。

そして、javascriptは

タイプが、minimal,square,flat,line,polaris,futuricoといった6つがあり、
minimal,square,flat,lineの4つには、
Black,Grey,Red,Orange,Green,Yellow,Blue,Pink,Aero,Purpleの8つの色から選べます。

種類はかなりありますね〜

タイプを変更させる場合は、
上記コードの「icheckbox_square」、「iradio_square」
_(アンダースコア)以降を変更すればOKです。
(例:icheckbox_minimal,icheckbox_flat等)
色を付ける場合は、
さらに、タイプ以降に、-(ハイフン)にredと言った感じです。
(例:icheckbox_minimal-red,icheckbox_flat-blue)
オプションもあるみたいですが、
公式サイトをご覧ください。

html側は特にする必要がありません。

 

対応ブラウザは、
「Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. 」
とのことで、IEもカバーしているのが素晴らしいですね!

 

セレクトボックスをカスタマイズできるjQueryプラグイン『customSelect』

続きましては、セレクトボックスですが、
こちらは、上記のプラグインと違って、
デザインを自分で用意する必要があるというか、完全オリジナルで作れます。

まずは、下記からダウンロードして、

jQuery Custom Select Box Plugin

javascript

html

これで完成です!

こちらの対応ブラウザは、IE7からのようで、
IE6は対応していません。

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ