我有一个性别选择列表。
代码:
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
我想使用下拉列表中的图像作为 drop-down-icon.jpeg。
我想添加一个按钮来代替下拉图标。
怎么做?
最佳答案
在 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 小部件可用,非常接近您想要的。
关于html - 如何在选择列表中添加图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2965971/