Html 如何使用css更改IE8中禁用的html控件的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1411044/
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
How to change color of disabled html controls in IE8 using css
提问by Seth Reno
I'm trying to change the color of input controls when they are disabled using the following css.
当使用以下 css 禁用输入控件时，我正在尝试更改它们的颜色。
input[disabled='disabled']{
color: #666;
}
This works in most browsers, but not IE. I'm able to change any of the other style properties such as background-color, border-color, etc... just not color. Can anyone explain this?
这适用于大多数浏览器，但不适用于 IE。我可以更改任何其他样式属性，例如背景颜色、边框颜色等……只是不是颜色。谁能解释一下？
回答by Wayne Austin
Unfortunately if you use the disabled attribute, no matter what you try IE will just default the color of the text to Grey, with a weird white shadow...thing... yet all other styles will still work. :-/
不幸的是，如果您使用 disabled 属性，无论您尝试什么，IE 都会将文本的颜色默认为灰色，带有奇怪的白色阴影......事情......但所有其他样式仍然有效。:-/
回答by robocat
I had the same problem for <select>elements in IE10and found a solution that works for select elements only:
我对IE10 中的<select>元素遇到了同样的问题，并找到了一个仅适用于选择元素的解决方案：
There is a Microsoft pseudo-element that allows the text color to be modified:
有一个 Microsoft 伪元素允许修改文本颜色：
select[disabled='disabled']::-ms-value {
color: #000;
}
The rule must be on it's own, because otherwise other browsers will ignore the whole rule due to syntax error. See http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspxfor other Internet Explorer only pseudo elements.
规则必须是它自己的，否则其他浏览器会因为语法错误而忽略整个规则。有关其他 Internet Explorer 仅伪元素，请参阅http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx。
Edit: I think the rule should probably be select[disabled]::-ms-valuebut I don't have older IE versions in front of me to try it - re-edit this paragraph or add comment if that is an improvement.
编辑：我认为规则可能应该是，select[disabled]::-ms-value但我面前没有旧的 IE 版本来尝试 - 重新编辑本段或添加评论，如果这是一个改进。
回答by Hamid Tavakoli
There is no way to override styles for disable="disable" attribute. Here is my work around to fix this problem, note I am only selecting submit buttons in my case:
无法覆盖 disable="disable" 属性的样式。这是我解决此问题的方法，请注意，在我的情况下，我只选择提交按钮：
if ($.browser.msie) {
$("input[type='submit'][disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("onclick", "javascript:return false;");
});
}
example available: http://jsfiddle.net/0dr3jyLp/
可用示例：http: //jsfiddle.net/0dr3jyLp/
回答by Lihkinisak
I had the same problem with textarea "disabled" changing font color to gray. I did a workaround by using "readonly" attribute instead of "disabled" attribute to textarea with below css
我在 textarea “disabled” 将字体颜色更改为灰色时遇到了同样的问题。我通过使用“readonly”属性而不是“disabled”属性来解决以下css的textarea
textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color
color:#ffffff;// Desired text color
}
It worked for me like a charm!!, so I suggest to try this first before any other solution as it is easy to replace "disabled" with "readonly" without changing any other parts of code.
它对我很有用！！，所以我建议在任何其他解决方案之前先尝试这个，因为很容易将“禁用”替换为“只读”而无需更改代码的任何其他部分。
回答by Cold Hiller
I Know it's been a while since the creation of this topic, but i created this workaround, and well... It worked for me! ( Using IE 9 )
我知道自创建此主题以来已经有一段时间了，但我创建了这个解决方法，而且......它对我有用！（使用 IE 9）
The only consequence is that you can't select the value of the input.
唯一的后果是您无法选择输入的值。
Using Javascript:
使用 JavaScript：
if (input.addEventListener)
input.addEventListener('focus', function(){input.blur()}, true)
if (input.attachEvent)
input.attachEvent("onfocus", function(){input.blur()})
回答by viggity
I just made the whole background a light gray color, I think it more easily/quickly convey's that the box is disabled.
我只是将整个背景设为浅灰色，我认为它更容易/快速地表明该框已被禁用。
input[disabled]{
background: #D4D4D4;
}
回答by Booji Boy
The way I solved the problem of "disabling" a control in IE w/o the ugly gray with a input control of type = checkbox was to leave it enabled and use a little javascript in the onclick event to prevent changes:
我解决了在 IE 中“禁用”控件的问题的方法是将其启用并在 onclick 事件中使用一些 javascript 来防止更改：
onclick='this.checked == true ? this.checked = false : this.checked = true;'
回答by guzart
As mentioned by Wayne, and three years later still no luck w/ IE9, but...
正如韦恩所提到的，三年后使用 IE9 仍然没有运气，但是......
You could try lowering the opacityusing CSS, it makes it more readable and helps with the whole disabled state.
您可以尝试降低opacityusing CSS，它使其更具可读性并有助于整个禁用状态。
回答by Homa
It is the solution that I found for this problem:
这是我为这个问题找到的解决方案：
//if IE
//如果浏览器
inputElement.writeAttribute("unselectable", "on");
inputElement.writeAttribute("unselectable", "on");
//Other browsers
//其它浏览器
inputElement.writeAttribute("disabled", "disabled");
inputElement.writeAttribute("disabled", "disabled");
By using this trick, you can add style sheet to your input element that works in IE and other browsers on your not-editable input box.
通过使用此技巧，您可以将样式表添加到在 IE 和其他浏览器中无法编辑的输入框上的输入元素中。
回答by vince357
I mixed user1733926's and Hamid's solutions and I found an effective code for IE8, would be nice to know if it works in ie 9/10 as well (?).
我混合了 user1733926 和 Hamid 的解决方案，我找到了一个适用于 IE8 的有效代码，很高兴知道它是否也适用于 IE 9/10（？）。
<script type="text/javascript">
if ($.browser.msie) {
$("*[disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("unselectable", "on");
});
}
</script>
