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

【问题标题】：In Chrome, <select> element doesn't have background color when disabled在 Chrome 中，<select> 元素在禁用时没有背景颜色
【发布时间】：2014-05-22 08:36:02
【问题描述】：

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

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

见jsFiddle

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

铬

火狐

【问题讨论】：

你可以在这里问：chromium.org/developers/discussion-groups

标签： html css google-chrome

【解决方案1】：

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

它按照那些正确地做。

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

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

【讨论】：

对此+1，但我认为您还应该为您的示例代码添加 input:disabled

【解决方案2】：

浏览器这样做有很多原因，可能是浏览器作者用户体验研究后的结果，甚至可能是出于可访问性原因或一些视觉提示，以便您可以立即看到哪些被禁用。

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

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);
}

请注意，有时，您还需要将“鼠标指针”更改为正确的光标或 i-beam。

【讨论】：

【解决方案3】：

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

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

【讨论】：