如何使用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>

我在这里错过了什么吗？

Safari Chrome（我正在使用Windows 7）

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

如果你正在做的事情，你将不得不用qqxsswpois替换JavaScript替换，例如：

<select>

Answer 2

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

/* Style */
select option[value="1"] {
  background-color: #f00;  
}

select option[value="2"] {
  background-color: #0f0;   
}

select option[value="3"] {
  background-color: #00f;  
}

当然，使用类来定位会更容易，但这应该可以帮助您入门。

Answer 3

像这样？

<!-- HTML -->
<select>    
    <option value="1">Red</option>
    <option value="2">Green</option>
    <option value="3">Blue</option>
</select>

HTML：

http://jsfiddle.net/3HWUw/1/

CSS：

<select>
    <option id="one" value="1">Apple</option>
    <option id="two" value="2">Banana</option>
    <option id="three"value="3">Grape</option>
</select>

Answer 4

上面的工作，或者您可以在CSS中这样做：

#one {
    background-color: red;
}
#two {
    background-color: yellow;
}
#three {
    background-color: green;
}