如何使用HTML 5和CSS 3显示彩色下拉选择器？

Question

我有一个基本的HTML选择:

<select>
    <option value="1">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Grape</option>
</option>

我想将每个选项的背景颜色设置为不同的颜色.例如,Apple是红色的,香蕉是黄色的,而葡萄是紫色的.通过启动下拉菜单,我会在每个选项中看到不同的颜色.

是否有可能在最新的Firefox和Webkit(Chrome和Safari)浏览器上使用CSS3/HTML5实现上述目标？

注意:您是否可以在最新的Firefox和Chrome上测试您的解决方案,可能在Mac上？我知道背景颜色方法,但它只适用于Mac上的Firefox.

Answer 1

它不是那么容易吗？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>

我在这里错过了什么吗？

苹果浏览器           Chrome           (我使用的是Windows 7)

"葡萄"是蓝色的,因为那是我正在盘旋的那个.我不认为可以使用原生<select>元素更改蓝色"选定"颜色.

如果这就是你在做什么之后,你将不得不用<select>s替换替换s,例如:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/