如何更改禁用input的字体颜色?
我需要在CSS中更改禁用的input元素的样式。
<input type="text" class="details-dialog" disabled="disabled" />
我怎样才能做到这一点的Internet Explorer?
你不能用于Internet Explorer。
看到这个评论我写了一个相关的话题:
这似乎没有一个好方法,请参阅: 如何更改IE8中禁用的HTML控件的颜色使用css – 你可以设置input为
readonly
,而是有其他的后果(如readonly
,input
将是发送到服务器提交,但与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/