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

Question

如何在选择列表中添加图像？我有一份性别选择列表。代码：<select><option>male</option><option>female</option><option>others</option></select>我想使用下拉列表中的图像作为下拉列表。我想添加一个按钮代替下拉图标。怎么做？

Answer 1

在……里面火狐您只需将背景图像添加到选项中：

<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小部件库，例如jQueryUI，例如使用可选.

来自jQueryUI 1.11，选择菜单小部件是可用的，非常接近您想要的。

Answer 2

我的解决方案是使用FentAwome，然后添加库图像作为文本！您只需使用Unicodes，就可以在这里找到它们：用于Unicodes的参考文件

下面是一个状态过滤器示例：

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'><option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option><option value='paused' style='color:orange;'>
&#xf04c; &nbsp; Paused</option><option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option></select>

注意字体系列：Arial，FontAwome；需要按样式分配，以便选择，就像在示例中给出的一样！