jQuery Styled Select Boxは、セレクトボックスをシンプルにスタイリングして見やすい形にしてくれるjQueryプラグインです。デフォルトのセレクトボックスのデザインはどうも見づらいと感じている人は、こういったプラグインを活用するのも一つの手ですね。
jQuery Styled Select Box
以下のページからjQuery Styled Select Boxの実際のデモやHTML・JSコードの記述例をチェックできます。
デモでは「One」と表示されたセレクトボックスが設置されており、ここをクリックするとメニューリストが開かれます。リストにはOne、Two、Threeという項目が用意されています。
メニューリストが閉じられている時は、Oneの横の三角が下矢印になっていますが、メニューリストが開かれると上矢印になります。ちょっとした細部のアクセントにも気を配っているところがいいですね。
マークアップもこのようにスッキリ記述できます。
<select class="styled" name="numbers">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
というわけで、セレクトボックスをシンプルにスタイリングしてくれる軽量のjQueryプラグイン「jQuery Styled Select Box」の紹介でした。jQuery Styled Select Boxの詳細やダウンロードは以下のページからどうぞ。
