在Chrome中，<select>元素在禁用时没有背景色</select>

Question

Chrome为已禁用的输入设置了默认背景颜色，但在禁用时为<select>元素设置了默认背景颜色。这是什么原因？这对我来说似乎是个错误。

打开IE，Firefox和Chrome中的jsFiddle链接，注意区别。在IE和Firefox中，<input>和<select>都具有相同的样式。但在Chrome中，元素具有不同的样式。我希望<select>元素与<input>具有相同的背景颜色。

请参阅jsFiddle

<input disabled value="text" />
<select disabled>
    <option>option</option>
</select>

铬

火狐

Answer 1

因为浏览器的默认样式是这样的。

正是按照这些正确地做到了。

如果您想修复它以匹配，您可以使用CSS：

select:disabled {
    background-color: rgb(235, 235, 228);
    color: rgb(84,84,84);
}

Answer 2

浏览器出于很多原因这样做，可能是浏览器＆＃39;之后的结果。作者用户体验研究甚至可能出于可访问性原因或某些 visual cue 的原因，以便您可以立即看到哪些被禁用。

但是如果你仍然想要应用自己的风格。你可以这样做：

http://jsfiddle.net/fedmich/PmhJc/1/

select:disabled {
    background-color: rgb(235, 235, 228) !important;
    color: rgb(84,84,84);
}
input:disabled {
    background-color: rgb(235, 235, 228) !important;
    color: rgb(84,84,84);
}

请注意，有时候，您还需要更改鼠标指针＆＃34;到适当的光标或工字梁。

Answer 3

如果您不是浏览器开发人员，则不应该太在意浏览器默认样式。 如果您想使其颜色相同，则为Chrome添加样式：

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