フォームセレクトを装飾するjQueryベースプラグイン「customSelect」

デザイン性からフォームの「select」を装飾することがしばしばありますが、CSSのみでの装飾には限界があります。
それがIE7やIE8など、古いブラウザに対応させるとなるとなおさらの事です。

装飾にJSを利用するのはあまり好きではありませんが、最終手段として重宝しているのがjQueryのプラグイン「customSelect」です。
jQuery Custom Select Box Plugin – jQuery.customSelect()

しくみとしては、スクリプトで既存のselect句の上に空のレイヤーを重ねて、それを装飾できるようにしています。
また、そのレイヤーを選択した場合にselectのような挙動をさせて、既存のselect句のvalueと同期するように制御してくれます。

導入方法については公式サイトにもありますが、いたって簡単です。

まずはjQueryと公式サイトからダウンロードした「customSelect」を読み込みます。

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

次に装飾するselectフォームを用意し、任意のクラス名、例えば「custom」を指定します。

<select class="custom">
<option value="dummy1">ダミー１</option>
<option value="dummy2">ダミー２</option>
<option value="dummy3">ダミー３</option>
</select>

そしてJSでプラグインを実行します。

$('select.custom').customSelect();

そうすると、いわゆるプレーンな状態のselectボックスが表示されます。
枠線、マージン、ボタンなどがない、まっさらな状態ですね。

ここから、以下のセレクタで自由に装飾することができます。

.customSelect { 
}
.customSelect.customSelectHover {
}
.customSelect.customSelectOpen {
}
.customSelect.customSelectFocus {
}
.customSelectInner {
}

基本的にはデフォルトの状態「customSelect」、選択肢の見栄え「customSelectInner」を指定してあげれば、きれいに装飾できるでしょう。

クラス名を分ければ、同一ページ内の複数のselect句を、異なったデザインの装飾することもできます。

昨今のモダンブラウザではある程度CSSのみでの装飾が可能ですが、
複雑なデザインの場合、また、癖のあるIE7、IE8などを対応しなければならない場合に重宝しています。