2014年に制作した記事を2016/12に加筆修正
セレクトボックス（プルダウンメニュー）を装飾する方法をご紹介します。
ただし、セレクトボックスのデザインを変えることはリスクを伴います。
デザインによっては、セレクトボックスと気づいてもらえないこともあるでしょう。
見た目の美しさや周りのデザインとの調和を求めて、セレクトボックスに何らかのデザインをあててしまいたくなるのが制作側の人情かと思いますが、デザインがどうのとかいうユーザーでさえ、結局デザイン性の高いものよりデフォルトのセレクトボックスの方をクリックしたくなったりするものです。
見た目も大事なのですが、まずはセレクトボックスを開いてもらわないと話になりません。
IEでは表示が崩れます。IE9以降であれば一部はcssが効くので、hackやjsなどを駆使して、IEでもそれらしく見せることも可能でしょうが、ここでは割愛します。
<select>
<option value="item1">選択肢1</option>
<option value="item2">選択肢2</option>
<option value="item3">選択肢3</option>
<option value="item4">選択肢4</option>
<option value="item5">選択肢5</option>
</select>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
htmlは通常通り組みます。
select{
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
/*以下、適宜必要な装飾をする*/
}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
1～6行目でappearanceを使ってセレクトボックスのデフォルトデザインをリセットします。あとは、適宜装飾してください。
装飾を変えることができたり、その他便利な機能を付け加えられるプラグイン（サイト内リンク）もあります。