Question

我无法在Google Chrome浏览器的<select>列表中为选项设置背景颜色（和文字颜色）。

似乎在Firefox中正常工作：

Screen shot 2012-02-08 at 11.57.38 AM.png http://img638.imageshack.us/img638/980/screenshot20120208at115.png

但不是谷歌Chrome：

闭：

http://img684.imageshack.us/img684/3811/picturecj.png

打开：

Screen shot 2012-02-08 at 11.59.00 AM.png http://img163.imageshack.us/img163/980/screenshot20120208at115.png

代码：

<html>
<head>
    <style>
        select
        {
            background:yellow!important;
        }
        option
        {
            background:red!important;
        }
        .c1
        {
            background-color:green!important;
            color:red!important;
        }
    </style>
</head>
<body>

<select>
    <option class="c1">nice long option name</option>
    <option class="c2">nice long option name</option>
    <option class="c3">nice long option name</option>
    <option class="c4">nice long option name</option>
    <option class="c5">nice long option name</option>
</select>

</body>
</html>

我想知道Google Chrome是否正在使用它自己的元素或主机操作系统的元素来呈现选择框，这可能就是为什么它不起作用？也许这是一件好事，因为这些颜色看起来相当可怕，但如果Chrome提供更多控制权，那就太好了。

Answer 1

尝试： select {-webkit-appearance：none; }

也许这应该可以帮到你。

如果没有..可能Chrome不支持它。

Answer 2

一般来说，尝试风格和元素比它的价值更麻烦。跨浏览器支持是可怕的。您通常最终会使用JS解决方案。如果你的目标是一个特定的浏览器，你可能会没事，但我只是让浏览器以你想要的方式呈现和元素。

那就是说，如果你正在寻找一个很好的JS解决方案，我已经使用了Chosen并且发现它运行得很好。它将使用div和li项目替换您想要的元素，您可以根据自己的内容设置样式。

Answer 3

是的，-webkit-appearance做得很好。

但是，不要在select元素上应用此规则，将其分配给选项/ optgroup：

option, optgroup { -webkit-appearance: none; }

这解决了Ubuntu Chrome中的“whitebackground上的白色文字”。

希望，这有助于某人。

Answer 4

我在CWD之前遇到过这个问题。有时候你需要通过JavaScript / jQuery覆盖浏览器设置，因为看到浏览器有表格和表单元素的默认值。

查看此链接：这可能有助于样式化。

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Answer 5

对于使用黑暗主题的网站来说，这一直是一个问题。我发现在主css文件中应用此规则可以解决我的问题：

选择{-webkit -appearance：none}

希望它有所帮助。

如何更改Google Chrome中<option>元素的背景颜色？</option>

5 个答案: