我正在尝试使用以下 css 更改输入控件被禁用时的颜色。
input[disabled='disabled']{
color: #666;
}
这适用于大多数浏览器，但不适用于 IE。我可以更改任何其他样式属性，例如背景颜色、边框颜色等……只是不能更改颜色。谁能解释一下？
【问题讨论】：
标签： html css internet-explorer
不幸的是，如果您使用 disabled 属性，无论您尝试什么，IE 都会将文本的颜色默认为灰色，并带有奇怪的白色阴影......但所有其他样式仍然有效。 :-/
【讨论】：
我解决在 IE 中使用 type = checkbox 的输入控件“禁用”一个没有丑陋灰色的控件的方法是让它保持启用状态并在 onclick 事件中使用一点 javascript 来防止更改：
onclick='this.checked == true ? this.checked = false : this.checked = true;'
【讨论】：
onclick='return false;' 做同样的事情但更简单
正如韦恩所说，三年后仍然没有使用 IE9 的运气，但是......
您可以尝试使用 CSS 降低 opacity，它使其更具可读性并有助于整个禁用状态。
【讨论】：
我只是将整个背景设置为浅灰色，我认为它更容易/更快速地传达该框已禁用。
input[disabled]{
background: #D4D4D4;
}
【讨论】：
无法覆盖 disable="disable" 属性的样式。这是我解决此问题的方法，请注意，我只选择提交按钮：
if ($.browser.msie) {
$("input[type='submit'][disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("onclick", "javascript:return false;");
});
}
【讨论】：
我知道创建这个主题已经有一段时间了，但我创建了这个解决方法，而且……它对我有用！ （使用 IE 9）
唯一的后果是您无法选择输入的值。
使用 Javascript：
if (input.addEventListener)
input.addEventListener('focus', function(){input.blur()}, true)
if (input.attachEvent)
input.attachEvent("onfocus", function(){input.blur()})
【讨论】：
我对 IE10 中的 <select> 元素有同样的问题，并找到了一个仅适用于选择元素的解决方案：
有一个微软伪元素允许修改文本颜色：
select[disabled='disabled']::-ms-value {
color: #000;
}
规则必须是独立的，否则其他浏览器会因为语法错误而忽略整个规则。请参阅 http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx 了解其他 Internet Explorer 唯一的伪元素。
编辑：我认为规则应该是select[disabled]::-ms-value，但我面前没有旧的 IE 版本可以尝试 - 重新编辑本段或添加评论，如果这是一个改进。
【讨论】：
disabled、disabled=""、disabled="true"、disabled="disabled"。不幸的是，它在 IE9 中不起作用。
这是我为这个问题找到的解决方案：
//如果是IE
inputElement.writeAttribute("unselectable", "on");
//其他浏览器
inputElement.writeAttribute("disabled", "disabled");
通过使用此技巧，您可以将样式表添加到在 IE 和其他浏览器中工作的不可编辑输入框上的输入元素。
【讨论】：
我混合了 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>
【讨论】：
我在 textarea “禁用” 将字体颜色更改为灰色时遇到了同样的问题。 我通过对 textarea 使用“readonly”属性而不是“disabled”属性做了一个解决方法 用下面的css
textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color
color:#ffffff;// Desired text color
}
它对我来说就像一个魅力！！，所以我建议在任何其他解决方案之前先尝试这个，因为它很容易将“禁用”替换为“只读”而不更改任何其他代码部分。
【讨论】：
阅读这篇文章后，我决定创建一个输入，其作用类似于禁用的输入框，但为“只读”。
所以我做了它，所以它不能被选择或标签，或者有一个鼠标光标，让用户知道他们可以更改或选择值。
在 IE8/9、Mozzila 18、Chrome 29 上测试
<input name="UserName" class="accountInputDisabled" id="UserName" type="text" readOnly="readonly" value="" unselectable="on" tabindex="-1" onselectstart="return false;" ondragstart="return false;" onmousedown='return false;'/>
input.accountInputDisabled {
border: 1px solid #BABABA !important;
background-color: #E5E5E5 !important;
color: #000000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-moz-user-input: disabled;
-ms-user-select: none;
cursor:not-allowed;
}
input:focus {
outline: none;
}
【讨论】：
无需重写 CSS 使用基于类的方法，并且可以完美地使用事件
你可以做一件事：
<button class="disabled" onmousedown="return checkDisable();">
function checkDisable() {
if ($(this).hasClass('disabled')) { return false; }
}
http://navneetnagpal.wordpress.com/2013/09/26/ie-button-text-shadow-issue-in-case-of-disabled/
【讨论】：
移除 disabled 属性并使用 readonly 属性。编写所需的 CSS 以实现所需的结果。这适用于 IE8 和 IE9。
例如，对于深灰色，
input[readonly]{
color: #333333;
}
【讨论】：
type属性的值为hidden、range、color、checkbox、radio、file或@987653，则忽略readonly属性@ 所以它可能无法在所有输入上按预期工作
请检查此 CSS 代码。
input[type='button']:disabled, button:disabled
{
color:#933;
text-decoration:underline;
}
【讨论】：
我在 stackoverflow 遇到了这段代码，它帮助我使用 javascript 禁用 css 类。
$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");
原帖可以在Applying k-state-disabled class to text inputs - Kendo UI找到 觉得我应该分享！
【讨论】：
使用这个 css，适用于 IE11：
input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
opacity:0.99 !important;
background:black;
text-shadow:inherit;
background-color:white;
color:black
}
【讨论】：
问题在 IE11 中得到解决。 如果 IE11 问题依然存在，请检查 IE 使用的渲染引擎。
【讨论】：