如何更改禁用input的字体颜色?

我需要在CSS中更改禁用的input元素的样式。

<input type="text" class="details-dialog" disabled="disabled" /> 

我怎样才能做到这一点的Internet Explorer?

你不能用于Internet Explorer。

看到这个评论我写了一个相关的话题:

这似乎没有一个好方法,请参阅: 如何更改IE8中禁用的HTML控件的颜色使用css – 你可以设置input为readonly ,而是有其他的后果(如readonlyinput将是发送到服务器提交,但与disabled ,它不会): http : //jsfiddle.net/wCFBw/40

另外,请参阅: 更改禁用的IE中的文本框中的字体颜色

您可以:

 input[type="text"][disabled] { color: red; } 

下面让你在IE8中非常接近,也可以在其他浏览器中运行。

在你的html:

 <input type="text" readonly="readonly" <!-- disallow editting --> onfocus="this.blur();" <!-- prevent focus --> tabindex="-1" <!-- disallow tabbing --> class="disabledInput" <!-- change the color with CSS --> /> 

在你的CSS中:

 .disabledInput { color: black; } 

在IE8中,hover时会有less量的边框颜色变化。 input.disabledInput:hover的一些CSS可能会照顾到这一点。

 input[disabled], input[disabled]:hover { background-color:#444; } 

readonly="readonly"代替disabled 。 我认为这是相同的function。

 <input type="text" class="details-dialog" readonly="readonly" style="color: ur color;"> 

似乎没有人为此find解决办法。 我没有一个只基于CSS,但通过使用这个JavaScript技巧,我通常可以处理禁用的input字段。

请记住,禁用的字段总是遵循他们变得被禁用之前获得的风格。 所以诀窍将是1 – 启用他们2 – 改变类3-禁用他们再次。 由于这种情况发生得很快,用户无法理解发生了什么事

一个简单的JavaScript代码将会是这样的:

 function changeDisabledClass (id, disabledClass){ var myInput=document.getElementById(id); myInput.disabled=false; //First make sure it is not disabled myInput.className=disabledClass; //change the class myInput.disabled=true; //Re-disable it } 

这是我为这个问题find的解决scheme:

//如果IE

inputElement.writeAttribute(“unselectable”,“on”);

//其它浏览器

inputElement.writeAttribute(“disabled”,“disabled”);

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

你可以使用下面的样式不透明

 input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] { opacity: 0.85 !important; } 

或者一个特定的CSS类

 .ui-state-disabled{ opacity: 0.85 !important; } 

这适用于使禁用select选项作为标题。 它并不删除:disabled选项的默认文本阴影,但它确实删除了hover效果。 在IE中,你不会得到字体的颜色,但至less文字阴影消失了。 这里是html和css:

 <style> select option.disabled:disabled{color: #5C3333;background-color: #fff;font-weight: bold;} select option.disabled:hover{color: #5C3333 !important;background-color: #fff;} select option:hover{color: #fde8c4;background-color: #5C3333;} </style> <select> <option class="disabled" disabled>Header1</option> <option>Item1</option> <option>Item1</option> <option>Item1</option> <option class="disabled" disabled>Header2</option> <option>Item2</option> <option>Item2</option> <option>Item2</option> <option class="disabled" disabled>Header3</option> <option>Item3</option> <option>Item3</option> <option>Item3</option> </select> 

这里: https : //jsfiddle.net/7vb3h0q4/2/