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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个性别选择列表。

码：

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

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

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 1.11开始，可以使用 小部件，它非常接近您想要的。

以上是 如何在选择列表中添加图像？ 的全部内容， 来源链接： utcz.com/qa/418257.html

回到顶部