如何在选择列表中添加图像? [英] How to add images in select list?

问题描述

我有选择的性别列表.

代码:

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

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

I want to use an image in drop down list as drop-down-icon.jpeg.

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

I want to add a button in place of drop down icon.

该怎么做?

推荐答案

在 Firefox 中，您只需将背景图像添加到选项:

In Firefox you can just add background image to option:

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

Better yet, you can separate HTML and CSS like that

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 ，例如使用 可选 .

In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.

在jQuery UI 1.11中，提供了 选择菜单 小部件，该小部件是非常接近您想要的.

From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.

这篇关于如何在选择列表中添加图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！