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

小编典典

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

all

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

代码：

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

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

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

怎么做？

阅读 151

2022-07-30

共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
小部件，这与您想要的非常接近。

2022-07-30