如何使用CSS在IE8中更改禁用的html控件的颜色

我尝试使用以下CSS禁用输入控件时更改其颜色。

input[disabled='disabled']{
  color: #666;     
}

这适用于大多数浏览器，但不适用于IE。我可以更改任何其他样式属性，例如背景颜色，边框颜色等，只是不更改颜色。谁能解释一下？

不幸的是，如果您使用Disabled属性，无论您尝试什么，IE都只会将文本的颜色默认为灰色，带有奇怪的白色阴影……其他……其他所有样式仍然可以使用。：-/

对于IE10中的<select>元素，我遇到了同样的问题，并找到了仅适用于选定元素的解决方案：

http://jsbin.com/ujapog/7/

有一个Microsoft伪元素，允许修改文本颜色：

select[disabled='disabled']::-ms-value {
    color: #000;
}

该规则必须是独立的，因为否则其他浏览器会由于语法错误而忽略整个规则。有关其他仅Internet Explorer伪元素，请参见http://msdn.microsoft.com/zh-cn/library/ie/hh869604(v=vs.85).aspx。

编辑：我认为规则可能应该是，select[disabled]::-ms-value但是我没有更老的IE版本可以尝试-重新编辑本段或添加注释（如果有改进的话）。

没有方法可以覆盖disable =“ disable”属性的样式。这是解决此问题的方法，请注意，在这种情况下，我仅选择提交按钮：

if ($.browser.msie) {
    $("input[type='submit'][disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("onclick", "javascript:return false;");
    });
}

可用示例：http : //jsfiddle.net/0dr3jyLp/

我在将字体颜色更改为灰色的情况下禁用了textarea时遇到了同样的问题。我通过使用以下CSS的textarea使用“ readonly”属性而不是“ disabled”属性来进行变通

textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color        
color:#ffffff;// Desired text color
}

它像我的魅力一样对我起作用！！因此，我建议先尝试使用此方法，然后再使用其他解决方案，因为很容易用“只读”替换“已禁用”而无需更改任何其他代码部分。

我知道自创建该主题以来已经有一段时间了，但是我创建了此变通办法，很好……它对我有用！（使用IE 9）

唯一的结果是您无法选择输入的值。

使用Javascript：

    if (input.addEventListener)
            input.addEventListener('focus', function(){input.blur()}, true)
    if (input.attachEvent)
            input.attachEvent("onfocus", function(){input.blur()})

我只是将整个背景设置为浅灰色，我认为更容易/迅速传达出该框已禁用。

input[disabled]{
  background: #D4D4D4;     
}

我解决了在IE中禁用“不带灰色灰色且输入类型为=复选框的控件”的问题的方法是使其保持启用状态，并在onclick事件中使用一些javascript来防止更改：

onclick='this.checked == true ? this.checked = false : this.checked = true;'

正如韦恩（Wayne）所提到的，三年后仍然没有IE9的运气，但是...

您可以尝试降低opacityCSS的使用率，使其更具可读性，并有助于解决整个禁用状态。

这是我针对此问题找到的解决方案：

//如果是IE

inputElement.writeAttribute（“ unselectable”，“ on”）;

//其它浏览器

inputElement.writeAttribute（“ disabled”，“ disabled”）;

通过使用此技巧，可以将样式表添加到在IE和其他浏览器上不可编辑的输入框上可以使用的输入元素。

我混合使用user1733926和Hamid的解决方案，发现了IE8的有效代码，很高兴知道它是否也可以在9/10中工作（？）。

<script type="text/javascript">
if ($.browser.msie) {
    $("*[disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("unselectable", "on");
    });
}
</script>

阅读这篇文章后，我决定创建一个输入，该输入的行为类似于禁用的输入框，但它是“只读”的。

因此，我做到了，因此无法对其进行选择或制表，也无法通过鼠标光标向用户提供可以更改或选择值的想法。

在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/

删除禁用的属性并使用只读属性。编写所需的CSS以获得所需的结果。这适用于IE8和IE9。

例如，对于深灰色，

 input[readonly]{
   color: #333333;     
 }

请检查此CSS代码。

input[type='button']:disabled, button:disabled
 {
    color:#933;
    text-decoration:underline;
}

或检查此URL。 http://jsfiddle.net/kheema/uK8cL/13/

该问题已在IE11中解决。如果IE11中问题仍然存在，请检查IE是否正在使用渲染引擎。

我在stackoverflow上遇到了这段代码，它帮助我使用了JavaScript禁用了CSS类。

$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");

可以在将禁用k状态的类应用于文本输入中找到原始线程-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
}