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

不幸的是,如果您使用禁用属性,无论您尝试什么,ie都会将文本的颜色默认为灰色,带有奇怪的白色阴影…东西…然而,所有其他的风格仍然有效。- -

我也有同样的问题 <select> 中的元素 IE10 找到了一个只适用于选定元素的解决方案:

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

有一个允许修改文本颜色的Microsoft伪元素:

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版本来尝试它-重新编辑这段,或者添加评论,如果这是一个改进。

无法替代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/

我在将字体颜色更改为灰色时遇到了同样的问题。 我使用了“readonly”属性而不是“disabled”属性来解决文本区域的问题。 使用以下CSS

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

这对我来说真是一种魅力!!,所以我建议在任何其他解决方案之前先尝试这个方法,因为用“readonly”替换“disabled”很容易,而不需要更改代码的任何其他部分。

我知道创建这个主题已经有一段时间了,但是我创建了这个变通方案,而且…对我有用!(使用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中“禁用”控件的问题,不使用输入控件type=checkbox的难看的灰色,方法是使其保持启用状态,并在onclick事件中使用一点javascript来防止更改:

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

正如韦恩所提到的,三年后的IE9仍然不走运,但是…

你可以试着降低 opacity 使用CSS,它使它更可读,并有助于整个禁用状态。

这是我为这个问题找到的解决方案:

I/IF

inputElement.WriteAttribute(“不可选择”,“打开”);

//其他浏览器

inputElement.WriteAttribute(“已禁用”,“已禁用”);

通过使用这个技巧,您可以将样式表添加到输入元素中,该元素在不可编辑的输入框中的IE和其他浏览器中工作。

我混合了用户1733926和Hamid的解决方案,并找到了一个有效的IE8代码,很高兴知道它是否也适用于IE9/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;
}

或者检查这个网址。 http://jsfiddle.net/kheema/uK8cL/13/

这个问题在IE11中解决了。 如果问题仍然存在于IE11中,请检查渲染引擎IE是否正在使用。

我在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
}