如何在选择列表中添加图像？

Question

我有一个精选的性别列表。

代码：

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

我想在下拉列表中使用图像作为 drop-down-icon.jpeg。

我想添加一个按钮来代替下拉图标。

怎么做？

原文由 Mayur 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 Firefox 中，您可以将背景图像添加到选项中：

 <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 ，例如使用 Selectable 。

从 jQuery UI 1.11 开始， Selectmenu 小部件可用，这非常接近您想要的。

原文由 vartec 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于国家、语言或货币，您可以使用表情符号。

适用于几乎所有支持使用表情符号的浏览器/操作系统。

 select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

 <select name="countries">
    <option value="NL">🇳🇱&emsp;Netherlands</option>
    <option value="DE">🇩🇪&emsp;Germany</option>
    <option value="FR">🇫🇷&emsp;France</option>
    <option value="ES">🇪🇸&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">🇪🇺&emsp;€&emsp;EUR&emsp;💶</option>
    <option value="GBP">🇬🇧&emsp;£&emsp;GBP&emsp;💷</option>
    <option value="USD">🇺🇸&emsp;$&emsp;USD&emsp;💵</option>
    <option value="YEN">🇯🇵&emsp;¥&emsp;YEN&emsp;💴</option>
</select>

原文由 Tim 发布，翻译遵循 CC BY-SA 4.0 许可协议