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

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

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

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

DEMO

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

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

XHTML

<link type="text/css" href="skins/all.css" rel="stylesheet" media="all" /> <link type="text/css" href="css/custom.css" rel="stylesheet" media="all" /> <!-- なくてもOK！ --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.icheck.min.js"></script>

1 2 3 4

<link type="text/css" href="skins/all.css" rel="stylesheet" media="all" /> <link type="text/css" href="css/custom.css" rel="stylesheet" media="all" /> <!-- なくてもOK！ --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.icheck.min.js"></script>

そして、javascriptは

<script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_square', radioClass: 'iradio_square' }); }); </script>

1 2 3 4 5 6 7 8

<script>             $(document).ready(function(){               $('input').iCheck({                 checkboxClass: 'icheckbox_square',                 radioClass: 'iradio_square'               });             }); </script>

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

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

タイプを変更させる場合は、
上記コードの「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

XHTML

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.icheck.min.js"></script> <script type="text/javascript" src="js/jquery.customSelect.min.js"></script>

1 2 3

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.icheck.min.js"></script> <script type="text/javascript" src="js/jquery.customSelect.min.js"></script>

javascript

JavaScript

<script> $(document).ready(function(){ $('.ctSelect').customSelect({customClass:'ctSelect'}); }); </script>

1 2 3 4 5 6 7

<script>             $(document).ready(function(){                 $('.ctSelect').customSelect({customClass:'ctSelect'});               }); </script>

html

XHTML

<select class="ctSelect"> <option value="">test1</option> <option value="">test2</option> <option value="">test3</option> </select>

1 2 3 4 5

<select class="ctSelect">     <option value="">test1</option>     <option value="">test2</option>     <option value="">test3</option> </select>

これで完成です！

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