温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - How to add images in select list?
css html

html - 如何在选择列表中添加图像?

发布于 2020-03-28 23:19:31

我有一个性别选择列表。

码:

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

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

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

怎么做?

查看更多

查看更多

提问者
Mayur
被浏览
15
50.6k 2014-10-06 00:29

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小部件,它非常接近您想要的。