セレクトボックスはクリックする前の上澄み部分はcssでデザイン調整が可能ですよね。
ただしクリックした後の、プルダウン部分（option部分）はcssではデザインできませんよね。
ブラウザの仕様だからと諦めるのは簡単だけど、ここにも絶賛、拘りたいですよね。
これをデザインするだけなら、jQueryが色々あるのですが、タブやキー操作に対応しているプラグインがあまりなく、探してました。
見つけた中でも使いやすかったので、dropkick.jsを紹介します。
- Git Hubからソースコードをダウンロード
- dropkick.css
- dropkick.min.js
<link rel="stylesheet" href="dropkick.css" type="text/css"> <script type="text/javascript" src="dropkick.min.js"></script>
いつも通り読み込みます（パスは環境に合わせてください）。
ドキュメントは下記でお確かめください
http://dropkickjs.com/
基本的にはカスタマイズしたいselectタグにidかクラスをつけて、そのid名かクラス名に下記を当てるだけ。
$(“#normal_select”).dropkick({
mobile: true
});
これでselectタグが div と ul liタグに置き換わり、かつvalueも連動していて、かつタブやキー操作でも動いてくれる。
使用する際は、ライセンスを確認してください。
DropKickは、セレクトボックスの見た目をリッチにしてくれるプラグインです。
テーマはdefault, black の２つが用意されています。