軽量で導入が簡単な「customSelect.js」
「customSelect.js」は、セレクトボックスを簡単にスタイリングできる軽量なプラグインです。
customSelect.jsを入手する
まずは、customSelect.jsを配布ページから入手しましょう。customSelect.jsはMITおよびGPLライセンスのもと、「GitHub」で公開されています。画面右下の「Download ZIP」ボタンからダウンロードしてください。
HTMLから参照させ、プラグインを実行する
ダウンロードしたファイルを展開して、jquery.customSelect.js（通常版）またはjquery.customSelect.min.js（縮小版）をHTMLから参照させます。
<!-- jQueryの読込 --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- custumSelec.min.jsの読込 --> <script type="text/javascript" src="js/jquery.customSelect.min.js"></script>
HTMLコードは次のようになります。サンプルでは、select要素に「sample」というクラス名を付けました。
<form>
<select class="sample">
<option value="s1">選択肢1</option>
<option value="s2">選択肢2</option>
<option value="s3">選択肢3</option>
<option value="s4">選択肢4</option>
<option value="s5">選択肢5</option>
</select>
</form>
次に、スタイルを適用したいselect要素をjQueryのセレクターで指定して、プラグインを実行します。
<script type="text/javascript">
$(function(){
$(".sample").customSelect();
});
</script>
セレクトボックスをスタイリングする
ここまでで、右側に表示される下向きの三角形は非表示になるので、あとは、CSSで自由にスタイリングすることができます。次のようなクラスセレクタが用意されています。
| セレクタ | 説明 |
|---|---|
| .customSelect | デフォルト時 |
| .customSelect.customSelectHover | ホバー時 |
| .customSelect.customSelectOpen | 展開時 |
| .customSelect.customSelectFocus | フォーカス時 |
| .customSelectInner | セレクトボックスのインナースタイル |
サンプルでは、デフォルト時、斜線の背景画像と角丸のボーダーでスタイリングしています。インナースタイルに、右側に表示される三角形アイコンを指定、ホバー時はシャドウが出るように指定しています。
<style type="text/css">
select {
width: 400px;
}
/* デフォルト */
.customSelect {
background: url(sample01.png);
padding: 10px;
border: 4px solid #999;
border-radius: 10px;
}
/* ホバー時 */
.customSelect.customSelectHover {
border: 4px solid #ccc;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
/* インナー */
.customSelectInner {
background: url(arrow01.png) right center no-repeat;
}
</style>
セレクトボックスは、ブラウザごとのデフォルトスタイルが大きく異なり、スタイリングが難しいですが、customSelect.jsを使えば、デフォルトスタイルの差異を意識することなくCSSで簡単にスタイリングできます。導入も簡単で軽量なので、手軽に使えて便利ですが、展開時の選択肢のデザインは制御できません。
次に紹介するMinimalectは、セレクトボックス展開時の選択肢のデザインも含め、あらかじめ用意された美しいデザインのテーマを適用できるjQueryプラグインです。
