CSS 更改 IE 中已禁用的文本框中的字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/602070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing font colour in Textboxes in IE which are disabled
提问by chugh97
I noticed that you can change the colour of text in textboxes which are disabled in Firefox applying a simple class but could not get a way to do it in IE 6/7. Does anyone out there have a elegant solution to achieve this.
我注意到您可以更改文本框中文本的颜色，这些文本框在 Firefox 中禁用，应用一个简单的类，但在 IE 6/7 中无法实现。有没有人有一个优雅的解决方案来实现这一目标。
回答by bobince
I noticed that you can change the colour of text in textboxes which are disabled in Firefox
我注意到您可以更改 Firefox 中禁用的文本框中文本的颜色
I think what the question is trying to say is that this:
我认为这个问题想说的是：
<textarea disabled="disabled" style="color: red;">Hello</textarea>
Results in grey text in IE, vs. red in Fox. FWIW, Opera also gives grey, whilst the WebKit browsers give red.
结果在 IE 中为灰色文本，而在 Fox 中为红色。FWIW，Opera 也显示为灰色，而 WebKit 浏览器显示为红色。
This is a pure CSS issue to do with how much form fields are rendered according to the OS's widget set and how much according to the CSS rules. This has always been an area of great cross-browser difference. Scripting is not relevant, much though SO would like “use jQuery” to be the answer to every question.
这是一个纯粹的 CSS 问题，涉及根据操作系统的小部件集呈现多少表单字段以及根据 CSS 规则呈现多少。这一直是跨浏览器差异很大的领域。脚本无关紧要，尽管 SO 希望“使用 jQuery”作为每个问题的答案。
The usual workaround is to use ‘readonly' instead of ‘disabled', then use styling (eg. based off ‘class="disabled"') to reproduce whatever shaded disabled effect you want. ‘readonly' controls are not turned into OS-level-disabled widgets, giving you more latitude to style them.
通常的解决方法是使用 'readonly' 而不是 'disabled'，然后使用样式（例如，基于 'class="disabled"'）来重现您想要的任何阴影禁用效果。“只读”控件不会变成操作系统级别禁用的小部件，让您有更多的空间来设计它们。
回答by chugh97
It should be noted that using the disabledattribute causes the underlying <input>element not to be submitted during a form submit, where as readonlycontrols are submitted to the server. Thus, you shouldn't use readonlyif your server code isn't expecting a value from that control.
应该注意的是，使用该disabled属性会导致<input>在表单提交期间不提交底层元素，而readonly控件则被提交到服务器。因此，readonly如果您的服务器代码不期望来自该控件的值，则不应使用。
It's been my experience that trying to hack something to get an acceptable presentation usually isn't worth it. I'd suggest you either change your CSS so that the fixed IE disabled text styling doesn't conflict with your underlying control style, or you use styled text in place of the control (since disabled controls aren't successful for submission anyways). Work with the browser and not against it.
根据我的经验，试图破解某些东西以获得可接受的演示文稿通常是不值得的。我建议您更改 CSS 以便固定的 IE 禁用文本样式不会与您的底层控件样式冲突，或者您使用样式文本代替控件（因为禁用的控件无论如何都无法成功提交）。使用浏览器而不是反对它。
回答by robocat
I had the same problem for <select>elements in IE10 and found a solution:
我对<select>IE10 中的元素遇到了同样的问题，并找到了解决方案：
There is a Microsoft psuedo-element that allows the text color to be modified:
有一个 Microsoft psuedo-element 允许修改文本颜色：
select[disabled='disabled']::-ms-value {
color: #000;
}
The rule must be on it's own, because otherwise other browsers will ignore the whole rule due to syntax error. See http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspxfor other Internet Explorer only psuedo elements.
规则必须是它自己的，否则其他浏览器会因为语法错误而忽略整个规则。有关其他 Internet Explorer 仅伪元素，请参阅http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx。
EDIT: The -ms-valuepsuedo-element was introduced in IE10 so won't work on earlier versions.
编辑：-ms-value伪元素是在 IE10 中引入的，因此不适用于早期版本。
回答by Schnapz
Problem with IE that it cannot apply style for disabled control, that is why firstly we need to remove it from our textboxes, then add our style and disable focusing on control. I've tried also unbind('focus') but it didn't work.
IE 的问题是它不能为禁用的控件应用样式，这就是为什么我们首先需要将它从我们的文本框中删除，然后添加我们的样式并禁用对控件的关注。我也试过 unbind('focus') 但它没有用。
So I used JQUERY for this:
所以我为此使用了 JQUERY：
var disabledControls = $("input:disabled, textarea:disabled");
disabledControls.removeAttr('disabled');
disabledControls.addClass("is-disabled");
disabledControls.focus(function() {
this.blur();
});
CSS class:
CSS类：
.is-disabled {
background-color: #EBEBEB;
color: black !important;
}
Works perfectly in IE8\9 and Chrome...
在 IE8\9 和 Chrome 中完美运行...
回答by dazz
You can use the following to simulate disabled-field behaviour with these next lines:
您可以使用以下下一行来模拟禁用字段的行为：
// find all disabled fields
$("input:disabled, textarea:disabled, select:disabled").each(function(index){
// add the class is_disabled
$(this).addClass("is_disabled");
// remove the attribut disabled
$(this).removeAttr('disabled');
// add new attribut readonly
$(this).attr('readOnly', 'readOnly');
});
// on submit remove all fields which are still with class is_disabled
$('form').submit(function() {
// find all fields with class is_isabled
$("input.is_disabled, textarea.is_disabled, select.is_disabled").each(function(index){
// and remove them entirely
$(this).remove();
});
return true;
});
// now don't let anyone click into the fields
// this will simulate the 'disabled' functionality
$('.is_disabled').click(function() {
$('.is_disabled').blur();
});
回答by user007
I guess you can write the css for that than going ahead with JQuery. I have not tested it out. But if you disable a textarea, it should take care of the styles automatically. Add this to your stylesheet and let me know....
我想您可以为此编写 css，而不是继续使用 JQuery。我还没有测试过。但是如果你禁用一个 textarea，它应该会自动处理样式。将此添加到您的样式表并让我知道....
input[disabled][type='text'], textarea[disabled]{ color: rgb(0,0,0); background-color:Silver;}
回答by Adi Katz
I also looked for a simple, scriptless solution. The following worked for me in IE 8. The idea is to use background transparency and a filter to transform and colorize the text. This darkens the disabled text just enough to make it readable.
我还寻找了一个简单的、无脚本的解决方案。以下在 IE 8 中对我有用。这个想法是使用背景透明度和过滤器来转换和着色文本。这会使禁用的文本变暗以使其可读。
textarea[disabled], select[disabled], input[type='text'][disabled] {
/*required*/
background-color:transparent;
filter: light;
/*fine tuning*/
font-weight:100;
font-family: Tahoma;
border: 1px solid;
letter-spacing:1px;
}
The selectdoesn't have a drop shadow, so make the text very thick to get a similar
font-weight effect.
在select没有阴影，所以使文字很厚得到相似的字体，减肥等功效。
select[disabled] {
font-weight:900;
}
回答by Anas
input[disabled] and input[readonly] works in IE 7, 8 and 9 when you add this line to the html file:
将此行添加到 html 文件时，input[disabled] 和 input[readonly] 在 IE 7、8 和 9 中有效：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
回答by Ross
Afaicr in the HTML it looks a little something like <textarea disabled="disabled">right? You could get away with textarea[disabled="disabled"]in IE7 (might not work in IE6 however).
Afaicr 在 HTML 中看起来有点像<textarea disabled="disabled">吧？您可以textarea[disabled="disabled"]在 IE7 中逃脱（但是在 IE6 中可能无法使用）。
fredrikholmstrom's answer is the best cross-browser solution.
fredrikholmstrom的答案是最好的跨浏览器解决方案。
回答by Mike
Use a label overlay:
使用标签叠加：
<asp:Label ID="lblTxtHider" runat="server" Text="" CssClass="hidden" Enabled="false"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="frmItem" Visible="false" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
Then in CSS:
然后在 CSS 中：
.disabledColorChanger {
position: absolute;
font-family: Arial;
font-size: 13px;
margin-top: 3px;
margin-left: 4px;
}
.disabledColorChanger[disabled] {
display:none;
}
And in code when setting or disabling:
在设置或禁用时在代码中：
private void SetEnabled(bool enabled)
{
lblTxtHider.Enabled = !enabled;
TextBox1.Enabled = enabled;
lblTxtHider.Text = TextBox1.Text;
}
And the CORRECTED code for detecting ie:
以及用于检测的更正代码，即：
<script>
$(document).ready(function () {
var isIE = /*@cc_on!@*/false || !!document.documentMode;
if (isIE) {
document.getElementById("<%=lblTxtHider.ClientID%>").className = "disabledColorChanger";
}
});
</script>
Just set the label = the input value. Works for me.
只需设置标签 = 输入值。为我工作。
