[解決済み] セレクトリストに画像を追加するには？

質問

性別の選択リストがあります。

コード

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>  

ドロップダウンリストにdrop-down-icon.jpegのような画像を使いたいのですが。

ドロップダウンのアイコンの代わりにボタンを追加したいのですが。

どうすればいいですか？

どのように解決するのですか？

で ファイアフォックス オプションに背景画像を追加するだけです。

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 

もっといいのは、HTMLとCSSを次のように分離することです。

HTML

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  

CSS

select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }

で 他のブラウザー のようなJSウィジェットライブラリを使用するしかないでしょう。 jQuery UI を使用するなど 選択可能 .

jQuery UI 1.11より。 セレクトメニュー というウィジェットが用意されており、これはあなたの希望に非常に近いものです。