Html 如何更改<；的背景色；选项>；谷歌浏览器中的元素？

我在Google Chrome中设置

列表中选项的背景色（和文本颜色）时遇到问题

在Firefox中似乎工作正常：

但谷歌浏览器中没有：

关闭：

开放式：

代码：

选择
{
背景：黄色！重要；
}
选项
{
背景：红色！重要；
}
.c1
{
背景色：绿色！重要；
颜色：红色！重要；
}
很好的长选项名
很好的长选项名
很好的长选项名
很好的长选项名
很好的长选项名

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

试试： 选择{-webkit外观：无；}

也许这会对你有所帮助

---

如果不是。。可能Chrome不支持它。

我以前也遇到过这个问题。由于浏览器的表单和表单元素有一个默认值，所以有时需要通过JavaScript/jQuery覆盖浏览器设置

查看此链接：这可能有助于设计样式

---

总的来说，尝试设计风格和元素会带来更多麻烦。跨浏览器支持是可怕的。您通常会使用JS解决方案。如果你的目标是一个特定的浏览器，你可能没问题，但我会让浏览器按照你想要的方式渲染和渲染元素

---

也就是说，如果你正在寻找一个好的JS解决方案，我已经使用过，并且发现它非常有效。它将用div和li项替换您所需的元素，您可以根据自己的喜好进行样式设置。

是的，-webkit外观很好地完成了这项工作

但是，不要对select元素应用此规则，请将其分配给option/optgroup：

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

这解决了Ubuntu上Chrome浏览器中的“白色背景上的白色文本”

---

希望，这对某些人有所帮助。

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

选择{-webkit-appearance:none}

---

希望它能帮助别人。

hmm，看起来有一个选择是用

divs

来“构建”你自己的选择框，但这并不是我所希望的。我之所以选择它是因为第二部分“Chrome不支持它”

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