我有一个基本的 html 选择:
<select>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Grape</option>
</option>
我想将每个选项的背景颜色设置为不同的颜色。例如,苹果是红色的,香蕉是黄色的,葡萄是紫色的。通过启动下拉菜单,我会在每个选项中看到不同的颜色。
是否可以在最新的 Firefox 和 Webkit(Chrome 和 Safari)浏览器上使用 CSS3/HTML5 实现上述目标?
注意:您能否在最新的 Firefox 和 Chrome 上(可能在 Mac 上)测试您的解决方案?我知道背景颜色方法,但它只适用于 Mac 上的 Firefox。
最佳答案
是不是就这么简单? http://jsfiddle.net/d8p8Q/
<select>
<option value="1" style="background:red">Apple</option>
<option value="2" style="background:yellow">Banana</option>
<option value="3" style="background:purple">Grape</option>
</select>
我是不是漏掉了什么?
Safari Chrome (我使用的是 Windows 7)
“葡萄”是蓝色的,因为那是我悬停的那个。我认为不可能使用 native <select>
更改蓝色“选定”颜色元素。
如果这就是您要执行的操作,则必须换出 <select>
s 替换为 JavaScript,例如:
关于html - 如何使用 HTML 5 和 CSS 3 显示彩色下拉选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6311722/