セレクトボックスをミニマルなデザインでスタイリングできる「Minimalect」
Minimalectは、セレクトボックスにミニマルなデザインを簡単に適用できるjQueryプラグインです。
図8のように、シンプルで美しいデザインのデフォルトテーマと、展開時の選択肢が吹き出し風デザインのBubbleテーマが用意されています。
Minimalectを入手する
まずは、Minimalectは、MITライセンスで配布されており、公式ページから入手できます。
HTMLから参照させ、プラグインを実行する
ダウンロードしたファイルを展開して、jquery.minimalect.js（通常版）またはjquery.minimalect.min.js（縮小版）をHTMLから参照させます。続いてこのプラグインで使用するCSSファイルも参照させましょう。jquery.minimalect.css（通常版）とjquery.minimalect.min.css（縮小版）がありますが、Internet Explorerで表示が崩れるため、後でカスタマイズしやすいように、ここでは通常版を使用しました。
<!-- jQueryの読込 --> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- custumSelec.min.jsの読込 --> <script type="text/javascript" src="js/jquery.minimalect.js"></script> <!-- minimalect.cssの読込 --> <link rel="stylesheet" type="text/css" href="css/jquery.minimalect.css" media="screen" />
サンプルでは、デフォルトテーマを適用するselect要素に「sample01」というID名を、Bubbleテーマを適用するselect要素には「sample02」というID名を付けました。
<h2>デフォルトテーマ</h2>
<form>
<select id="sample01">
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
<option>選択肢4</option>
<option>選択肢5</option>
</select>
</form>
<h2>Bubbleテーマ</h2>
<form>
<select id="sample02">
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
<option>選択肢4</option>
<option>選択肢5</option>
</select>
</form>
後はjQueryのセレクタでselect要素を指定し、プラグインを実行するだけです。次のように指定すると、デフォルトのテーマを適用できます。
<script type="text/javascript">
$(function(){
$("#sample01").minimalect();
});
</script>
オプションで、bubbleテーマを指定し、プレースホルダーのテキストに「選択項目がありません」を指定するには、次のように記述します。
<script type="text/javascript">
$(function(){
$("#sample01").minimalect();
$("#sample02").minimalect({ theme: "bubble", placeholder: "選択項目がありません。" });
});
</script>
以上が基本的な使い方になりますが、Internet Explorer 11では、右側の三角形やプレースホルダーのテキストの位置がずれて表示されるという問題があります。
右側の三角形のCSSセレクタは「.minict_wrapper:after」、プレースホルダーは「.minict_wrapper span:empty:before」です。バグの原因となっているのは、これらをセレクタとしているルールセットのうち、line-heightの値の単位がremの箇所です。remとpxの2つの宣言があるので、pxを残し、remの方を削除またはコメントアウトして無効にしましょう。
.minict_wrapper:after {
～中略～
line-height: 23px;
/*line-height: 1.5rem; IE用コメントアウト*/}
.minict_wrapper span:empty:before {
line-height: 23px;
/*line-height: 1.5rem; IE用コメントアウト*/}
以上で、Internet Explorer 11でも問題なく表示されます。jquery.minimalect.cssをカスタマイズすれば、オリジナルのスタイリングもできるでしょう。
まとめ
現在のところセレクトボックスをCSSのみでスタイリングするには限界があります。CSSを駆使してトリッキーな方法でデザインするよりも、軽くて実装が簡単なjQueryプラグインを使う方がスマートだと言えるでしょう。セレクトボックスを自分で簡単にスタイリングしたい場合には、customSelect.jsを、あらかじめ用意された選択肢まで美しいデザインを簡単に適用したい場合にはMinimalectを、用途に合わせて選択してみてください。
