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

Posted 2023-01-14

我有一个基本的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。

答案

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

另一答案

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;  

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

另一答案

像这样？ <!-- 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>

另一答案

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

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