☰

選択リストに画像を追加するにはどうすればいいですか? 質問する

tag-icon • tag-icon html css
選択リストに画像を追加するにはどうすればいいですか? 質問する

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

コード：

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

ドロップダウンリスト内の画像を drop-down-icon.jpeg として使用したいと思います。

さらに、ドロップダウンアイコンの代わりにボタンを追加したいと思います。

どうやってするか？

ベストアンサー1

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

<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>

CS

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ウィジェットライブラリを使うことです。jQueryUI の例えば、選択可能。

jQuery UI 1.11から、選択メニュー希望に非常に近いウィジェットが利用可能です。

おすすめ記事