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

Question

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

我有一份性别选择列表。

代码：

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

我想使用下拉列表中的图像作为下拉列表。

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

怎么做？

Answer 1

在……里面火狐您只需将背景图像添加到选项中：<select> &nbsp;&nbsp;<option&nbsp;style="background-image:url(male.png);">male</option> &nbsp;&nbsp;<option&nbsp;style="background-image:url(female.png);">female</option> &nbsp;&nbsp;<option&nbsp;style="background-image:url(others.png);">others</option></select>更好的是，您可以像这样将HTML和CSS分开HTML<select&nbsp;id="gender"> &nbsp;&nbsp;<option>male</option> &nbsp;&nbsp;<option>female</option> &nbsp;&nbsp;<option>others</option></select>CSSselect#gender&nbsp;option[value="male"]&nbsp;&nbsp;&nbsp;{&nbsp;background-image:url(male.png);&nbsp;&nbsp;&nbsp;}select#gender&nbsp;option[value="female"] &nbsp;{&nbsp;background-image:url(female.png);&nbsp;}select#gender&nbsp;option[value="others"]&nbsp;{&nbsp;background-image:url(others.png);&nbsp;}在……里面其他浏览器唯一的方法是使用一些JS小部件库，例如jQueryUI，例如使用可选.来自jQueryUI 1.11，选择菜单小部件是可用的，非常接近您想要的。

Answer 2

我的解决方案是使用FentAwome，然后添加库图像作为文本！您只需使用Unicodes，就可以在这里找到它们：用于Unicodes的参考文件下面是一个状态过滤器示例：<select&nbsp;name='state'&nbsp;style='height:&nbsp;45px;&nbsp;font-family:Arial,&nbsp;FontAwesome;'><option&nbsp;value=''>&#xf039;&nbsp;&nbsp;&nbsp;All&nbsp;States</option> <option&nbsp;value='enabled'&nbsp;style='color:green;'>&#xf00c;&nbsp;&nbsp;&nbsp;Enabled</option><option&nbsp;value='paused'&nbsp;style='color:orange;'> &#xf04c;&nbsp;&nbsp;&nbsp;Paused</option><option&nbsp;value='archived'&nbsp;style='color:red;'>&#xf023;&nbsp;&nbsp;&nbsp;Archived</option></select>注意字体系列：Arial，FontAwome；需要按样式分配，以便选择，就像在示例中给出的一样！