Question

我注意到你可以改变文本框中文本的颜色，这些文本框在Firefox中应用了一个简单的类但在IE 6/7中无法实现这一目的。有没有人有一个优雅的解决方案来实现这一目标。

Answer 1

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

我认为问题是试图说：

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

在IE中显示灰色文本，在Fox中显示红色。 FWIW，Opera也提供灰色，而WebKit浏览器提供红色。

这是一个纯CSS问题，根据操作系统的窗口小部件集显示多少表单字段，以及根据CSS规则多少。这一直是一个跨浏览器差异很大的领域。脚本编写是不相关的，尽管SO希望“使用jQuery”作为每个问题的答案。

通常的解决方法是使用'readonly'而不是'disabled'，然后使用样式（例如，基于'class ='disabled“'）来重现你想要的任何阴影禁用效果。 'readonly'控件不会转换为OS级别禁用的小部件，为您提供更大的自定义样式。

Answer 2

应该注意的是，使用 disabled 属性会导致在表单提交期间不提交基础 <input> 元素，其中 readonly 控件已提交给服务器。因此，如果您的服务器代码不期望来自该控件的值，则不应使用 readonly 。

根据我的经验，尝试破解某些东西以获得可接受的演示文稿通常是不值得的。我建议您更改CSS，以便修复IE禁用的文本样式与您的基础控件样式不冲突，或者使用样式化文本代替控件（因为禁用的控件不能成功提交）。使用浏览器而不是反对它。

Answer 3

我对IE10中的<select>元素有同样的问题并找到了解决方案：

http://jsbin.com/ujapog/90

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

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

规则必须独立，因为否则其他浏览器会因语法错误而忽略整个规则。有关其他仅支持Internet Explorer的伪元素，请参阅http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx。

编辑：{10}中引入了-ms-value伪元素，因此无法在早期版本中使用。

Answer 4

IE的问题是它无法应用禁用控件的样式，这就是为什么首先我们需要从文本框中删除它，然后添加我们的样式并禁用专注于控件。我也试过解开（'焦点'），但它没有用。

所以我使用了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中完美运行......

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

Answer 6

我想你可以为此编写css，而不是继续使用JQuery。我还没有测试过。但是如果你禁用textarea，它应该自动处理样式。将其添加到样式表中并告诉我....

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

Answer 7

我还寻找一个简单的无脚本解决方案。以下在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没有投影，因此要使文字非常厚以获得相似的效果字体重量效应。

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

Answer 8

在HTML中它看起来有点像<textarea disabled="disabled">吗？您可以在IE7中使用textarea[disabled="disabled"]（但可能无法在IE6中使用）。

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

Answer 9

当您将此行添加到html文件时，输入[disabled]和输入[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">

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

用于检测的CORRECTED代码ie：

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

只需设置label =输入值即可。适合我。

Answer 11

你有两个选择（因为IE 6/7不支持：禁用css选择器）

使用jQuery（或您选择的其他一些js-lib）并将类应用于所有禁用的输入元素，例如：$（“input：disabled，textarea：disabled”）。addClass（“is-disabled”）;
在服务器端手动添加“is-disabled”类，如果您事先知道哪些元素将被禁用而哪些元素不会被禁用，这当然是可行的。

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

11 个答案: