Chrome中disabled状态select标签CSS背景色未生效，是浏览器Bug吗？

问题内容 #

我编写了如下代码：

CSS 代码：

select:disabled {
  background-color: #BBBBBB;
}

HTML 代码：

<select disabled>
  <option>test</option>
</select>

在Chrome中运行后，用取色器查看该select标签的背景色，得到的是#CFCFCF，而非设置的#BBBBBB。对其他标签执行相同操作时则能正常生效，请问这是Chrome的Bug还是我遗漏了什么？

解答 #

这不是Chrome的Bug，问题出在Chrome对禁用状态的<select>元素有原生的复合背景样式。Chrome默认给禁用的select设置了包含线性渐变的background属性，而单独的background-color优先级低于完整的background声明，所以你的设置被浏览器原生样式覆盖了。

你可以通过两种方式解决：

• 方式一：重置浏览器原生外观后再设置背景色

select:disabled {
  -webkit-appearance: none;
  appearance: none;
  background-color: #BBBBBB;
}

• 方式二：直接用background属性覆盖原生样式

select:disabled {
  background: #BBBBBB;
}

两种方式都能让你设置的背景色正常生效，你可以根据自己的需求选择。

内容的提问来源于stack exchange，提问作者Peter