样式在 HTML 中禁用 <select>（下拉框）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3829841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling disabled <select> (dropdown boxes) in HTML
提问by Heinzi
One of our customers has a hard time reading the grey text in disabled controls in our web-based application:
我们的一位客户很难阅读我们基于 Web 的应用程序中禁用控件中的灰色文本：
We would like to change the style to a light grey background and a black text. Unfortunately, most browsers (including IE, which is what the customer is using) ignore the color: ...CSS attribute on disabled controls, so we cannot change the foreground color.
我们想将样式更改为浅灰色背景和黑色文本。不幸的是，大多数浏览器（包括客户使用的 IE）都忽略了color: ...禁用控件上的CSS 属性，因此我们无法更改前景色。
For text boxes (input type="text"), this can easily be workarounded by using the readonlyinstead of the disabledattribute. Unfortunately, this is not an option for dropdowns (select) or checkboxes (input type="checkbox").
对于文本框 ( input type="text")，可以通过使用readonly代替disabled属性轻松解决此问题。不幸的是，这不是下拉菜单 ( select) 或复选框 ( input type="checkbox")的选项。
Is there an easy workaround for that? Preferebly one where the control does not need to be replaced by another type of control? (...since our controls are rendered by ASP.NET)
有没有简单的解决方法？最好是不需要用另一种类型的控件替换控件的控件？（...因为我们的控件是由 ASP.NET 呈现的）
PS: Using the [disabled]selector in CSS does not make a difference.
PS：[disabled]在 CSS 中使用选择器并没有什么区别。
回答by Will Martin
In Internet Explorer 9, support will be added for the :disabledpseudo-selector (ref). I don't know whether that will honor the "color" property, but it seems likely.
在 Internet Explorer 9 中，将添加对:disabled伪选择器 ( ref) 的支持。我不知道这是否会尊重“颜色”属性，但似乎很有可能。
In older versions of IE, you can adjust the background color (but not the color). Thus:
在旧版本的 IE 中，您可以调整背景颜色（但不能调整颜色）。因此：
<style type="text/css">
select[disabled] { background-color: blue; }
</style>
That works in IE 7 and IE 8. You still can't alter the foreground color, but you can change the background color to contrast more strongly with the gray that IE assigns it when it's disabled.
这适用于 IE 7 和 IE 8。您仍然无法更改前景色，但您可以更改背景色，以与 IE 禁用时为其分配的灰色形成更强烈的对比。
回答by Darren Cooney
This worked for me in webkit and Firefox
这在 webkit 和 Firefox 中对我有用
select:disabled{
opacity: 0.6;
}
回答by Disha teli
This worked for me
这对我有用
select[disabled='disabled']::-ms-value {
color: red;
}
回答by el_quick
Sorry for my english...
对不起我的英语不好...
That's not possible using css just, IE doesn't allow change properties of a disabled select tag
仅使用 css 是不可能的，IE 不允许更改禁用的 select 标签的属性
回答by Joost Boord
For those still finding this.
对于那些仍然发现这一点的人。
Not working:
不工作：
select[disabled] { background-color: blue; }
Working:
在职的：
select option [disabled] { background-color: blue; } will do
回答by sendon1982
You can try the following:
您可以尝试以下操作：
<style>
/*css style for IE*/
select[disabled='disabled']::-ms-value {
color: #555;
}
/*Specific to chrome and firefox*/
select[disabled='disabled'] {
color: #555;
}
</style>
