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

本文介绍了如何在选择列表中添加图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个性别选择列表。 代码： < select> < option>男< / option> < option> female< / option> < option>其他< / option> < / select> 我想使用下拉列表中的图像作为drop-down-icon.jpeg。 p> 我要添加一个按钮来代替下拉图标。 如何做？解决方案在 Firefox 中，您只需添加背景图片即可： < select> < option style =background-image：url（male.png）;>男< / option> < option style =background-image：url（female.png）;> female< / option> < option style =background-image：url（others.png）;>其他< / option> < / select> 更好的是，你可以像这样分开HTML和CSS HTML gender> < option>男< / option> < option> female< / option> < option>其他< / 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 ，例如使用 可选 。 从jQuery UI 1.11， 选择菜单 小部件可用，这非常接近你想要的。 I have a select list of genders.Code:<select><option>male</option><option>female</option><option>others</option></select>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.How to do that? 解决方案 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>Better yet, you can separate HTML and CSS like thatHTML<select id="gender"> <option>male</option> <option>female</option> <option>others</option></select>CSSselect#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); }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.From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want. 这篇关于如何在选择列表中添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！