如何改变颜色禁用 HTML 控件在 IE8使用 css

我试图改变颜色的输入控件时,他们被禁用使用下面的 css。

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

这在大多数浏览器中都可以工作,但 IE 不行。我能够改变任何其他样式属性,如背景颜色,边框颜色等。.只是不喜欢颜色。有人能解释一下吗?

79423 次浏览

不幸的是,如果你使用禁用属性,无论你尝试什么 IE 将只是默认的文本颜色为灰色,一个奇怪的白色阴影... 的东西... 但所有其他样式仍然会工作。:-/

我用 type = checkbox 的输入控件来解决 IE 中“禁用”控件的问题,就是让它保持启用状态,并在 onclick 事件中使用一些 javascript 来防止更改:

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

正如韦恩提到的,三年后仍然没有运气 w/IE9,但是..。

您可以尝试降低 opacity使用 CSS,它使其更具可读性,并有助于整个禁用状态。

我只是把整个背景设计成浅灰色,我觉得这样更容易/更快地表达出盒子是禁用的。

input[disabled]{
background: #D4D4D4;
}

没有办法覆盖销毁 = “销毁”属性的样式。下面是我解决这个问题的方法,注意在我的例子中我只选择了提交按钮:

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

例子: http://jsfiddle.net/0dr3jyLp/

我知道自从这个主题被创造出来已经有一段时间了,但是我创造了这个变通方法,而且... 它对我很有效!(使用 IE9)

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

使用 Javascript:

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

对于 IE10中的 <select>元素,我遇到了同样的问题,并且找到了一个仅适用于选择元素的解决方案:

Http://jsbin.com/ujapog/7/

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

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

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

编辑: 我认为规则可能应该是 select[disabled]::-ms-value,但我没有旧的 IE 版本在我面前尝试-重新编辑这一段落或添加注释,如果这是一个改进。

这就是我为这个问题找到的解决办法:

//如 IE

WriteAttribute (“ unselectable”,“ on”) ;

//其他浏览器

WriteAttribute (“禁用”,“禁用”) ;

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

我混合了用户1733926和哈米德的解决方案,我发现了一个有效的 IE8代码,如果它在9/10也能工作就好了(?).

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

我有同样的问题与文本区“禁用”改变字体颜色为灰色。 我使用“ readonly”属性而不是“ disable”属性对 textarea 做了一个变通 低于 css

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

它像魔法一样为我工作! !,所以我建议在任何其他解决方案之前首先尝试这个方法,因为它很容易用“ readonly”替换“ disked”,而不需要更改代码的任何其他部分。

在阅读了这篇文章之后,我决定创建一个类似于禁用的输入框但是是“只读”的输入。

因此,我已经使它不能被选择或选项卡,或有一个鼠标光标,给用户的想法,他们可以改变或选择的值。

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

我在 stackoverflow 中偶然发现了这段代码,它帮助我使用 javascript 禁用 css 类。

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

原始的线程可以在 < a href = “ https://stackoverflow. com/questions/20491191/applicing- k-state-disable-class-to-text-input-Kendo-UI”> Applicationk-state-disable class-to-text input-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 正在使用的渲染引擎。