更改禁用状态下IE文本框中的字体颜色

Question

我注意到在Firefox中，可以通过应用一个简单的类来更改禁用的文本框中文本的颜色，但是我无法找到在IE 6/7中实现此功能的方法。是否有人有优雅的解决方案呢？

- chugh97

---

我不使用jQuery，也不知道如何使用它...我正在寻找一种优雅的CSS解决方案。 - chugh97

Answer 1

我注意到在 Firefox 中，您可以更改禁用的文本框中文本的颜色。

我认为这个问题想要表达的是：

<textarea disabled="disabled" style="color: red;">Hello</textarea>

在IE中呈现灰色文本，而在Firefox中呈现红色。值得一提的是，Opera也会显示灰色，而Webkit浏览器则显示红色。

这是一个纯CSS问题，涉及到表单字段根据操作系统的小部件集合和CSS规则的渲染程度。这一直是一个存在跨浏览器差异的领域。脚本编写与此无关，虽然SO希望“使用jQuery”成为每个问题的答案。

通常的解决方法是使用“只读（readonly）”代替“禁用（disabled）”，然后使用样式（例如基于“class =“ disabled ””）来复制您想要的任何阴影禁用效果。“只读”控件不会被转换为操作系统级别的禁用小部件，从而使您能够更加自由地对其进行样式设置。

- bobince

---

谢谢您的解释...但我还有一个问题...如何使表单上的其他控件（如CheckboxLists等）只读，因为它们似乎没有这个属性。 - chugh97

是的，“readonly”只适用于< textarea >和< input type="text" / "password" >。 < input type="checkbox" / "radio">和其他控件，例如< select >只能被“禁用”，并且在任何情况下都有受限的样式机会。 - bobince

我有点困惑为什么这不是被选中的答案。谢谢。 - Carvell Fenton

将输入更改为只读的问题在于，当您提交表单时，它们的数据会发送到服务器。这不是禁用输入的行为，通常意味着您必须在服务器端编写代码来预测来自“禁用”字段的数据。否则，您可能会遇到人们可以向服务器发送不应允许的数据的潜在问题。 - BadHorsie

@BadHorsie：通常的做法是不给输入框设置“name”，这样它就不会成为提交数据的一部分。这意味着任何JavaScript代码都必须使用ID来获取输入框，而不是老式的基于名称的“form.elements”集合，但这也是最佳实践。 - bobince

Answer 2

需要注意的是，使用 disabled 属性会导致底层的 <input> 元素在表单提交时不会被提交，而 readonly 控件会被提交到服务器。因此，如果您的服务器代码不期望从该控件获取值，则不应使用 readonly。

我的经验是，试图通过黑客手段来获得可接受的呈现通常是不值得的。我建议您要么更改您的 CSS，使固定的 IE 禁用文本样式不与底层控件样式冲突，要么在控件的位置使用带样式的文本（因为禁用的控件无法成功提交）。与浏览器合作，而不是对抗它。

- Matthew Raymond

---

+1 这是正确的答案，我个人认为。你可以稍微改变设计，使得在IE中禁用的输入框看起来不错，或者你可以使用一个div，将其样式设置为你想要的禁用输入框的样子。 - BadHorsie

Answer 3

我在IE10中遇到了元素的同样问题，并找到了解决方案： http://jsbin.com/ujapog/90 Microsoft有一个伪元素可以允许修改文本颜色：select[disabled='disabled']::-ms-value { color: #000; } 规则必须是独立的，否则其他浏览器会因语法错误而忽略整个规则。请参见http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx了解其他仅适用于Internet Explorer的伪元素。编辑：-ms-value伪元素是在IE10中引入的，因此不适用于早期版本。

- robocat

---

那似乎没有改变IE8上的样式。在我的机器上仍然是凸起的灰色。 - Snekse

我一直在寻找解决方案，搜索了几乎整个互联网，但无法找到禁用选择框的解决方案，这个方法很有效！谢谢！ - SED

我怀疑最好使用 select:disabled::-ms-value（请参见 https://developer.mozilla.org/es/docs/Web/CSS/:disabled）或 select[disabled]::-ms-value（但是我目前没有安装IE，所以没有测试过，抱歉）。 - robocat

Answer 4

IE浏览器无法对禁用的控件应用样式，因此我们需要首先将其从文本框中移除，然后添加我们自己的样式并禁用控件聚焦。我也尝试过unbind('focus')，但它没有起作用。

因此我使用了JQUERY:

var disabledControls = $("input:disabled, textarea:disabled");
    disabledControls.removeAttr('disabled');
    disabledControls.addClass("is-disabled");
    disabledControls.focus(function() {
    this.blur();
});

CSS类：

.is-disabled {
    background-color: #EBEBEB;
    color: black !important;   
}

在IE8\9和Chrome中运行完美...

- Schnapz

---

因为您已经移除了输入框的禁用属性，所以当您提交表单时，该值将被发送到服务器。 - BadHorsie

Answer 5

您可以使用以下内容模拟禁用字段行为：

// 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();
});

- dazz

Answer 6

我还寻找了一种简单的、无脚本的解决方案。以下方法适用于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;
}

没有阴影，因此将文本加粗以获得类似的字重效果。

select[disabled] {
  font-weight:900;
}

- Adi Katz

Answer 7

我想你可以编写CSS来实现这个功能，而不是使用JQuery。我还没有测试过它。但是如果你禁用一个文本区域，它应该会自动处理样式。将此添加到您的样式表中，然后告诉我....

input[disabled][type='text'], textarea[disabled]{ color: rgb(0,0,0); background-color:Silver;}

- user007

---

出乎意料的是，在IE8中它对我起作用了，我还没有在IE7中进行测试。 - Yogesh Jindal

@user197586 你有机会在IE7中测试过这个吗？ - user007

Answer 8

当您将以下行添加到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">

- Anas

---

这是唯一对我起作用的解决方案。我尝试了本页和其他问题中的所有其他答案，但都没有帮助到我。 - Siva

Answer 9

在HTML中，它看起来像这样：<textarea disabled="disabled">，对吧？你可以在IE7中使用textarea[disabled="disabled"]（但在IE6中可能无法正常工作）。

fredrikholmstrom的答案是最好的跨浏览器解决方案。

- Ross

Answer 10

使用标签叠加：

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

然后在 CSS 中：

.disabledColorChanger {
position: absolute;
font-family: Arial;
font-size: 13px;
margin-top: 3px;
margin-left: 4px;
}
.disabledColorChanger[disabled] {
    display:none;
}

在代码中设置或禁用时：

private void SetEnabled(bool enabled)
{
   lblTxtHider.Enabled = !enabled;
   TextBox1.Enabled = enabled;
   lblTxtHider.Text = TextBox1.Text;
}

检测IE的已更正代码：

<script>
    $(document).ready(function () {
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE) {
            document.getElementById("<%=lblTxtHider.ClientID%>").className = "disabledColorChanger";
        }
    });
</script>

只需将标签设置为输入值即可。对我来说有效。

- Mike