jQuery mobile などの大規模なプラグインを導入せずに オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。 動作サンプルはこちら。 フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。 ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。 実際のソース 大雑把に解説すると、本物のセレクトボックスは透明にしてクリック判定のためだけに配置しておいて 装飾部分は.innerのdivで代替しています。 javascriptでは、セレクトボックスで選択された値(選択された項目の表示文字列)を取得して .innerの要素に表示させています。 <div cla
![selectのデザインをCSSとJavascriptでカスタマイズ](https://cdn-ak-scissors.b.st-hatena.com/image/square/34e50cb9e87abd417db09ea67b8444ef5c8de141/height=288;version=1;width=512/http%3A%2F%2Fwebdev.jp.net%2Fwp-content%2Fuploads%2F2013%2F07%2Fcustom-selectbox.png)