JQM，CSS：如何更改禁用字段 css？答案

【问题标题】：JQM, CSS: How to change disabled fields css?JQM，CSS：如何更改禁用字段 css？
【发布时间】：2013-08-01 00:55:43
【问题描述】：

我有一个简单的 JQuery Mobile 表单，其中有可以根据某些条件禁用或启用的文本字段。正常启用的文本字段如下所示：

禁用看起来像这样：

我想让禁用字段中的文本更具可读性。我该怎么做？

HTML

<asp:Label ID="lblCityPostal" AssociatedControlID="txtCityPostal" runat="server"
       Text="City"></asp:Label>                        
<div class="clear">
</div>
<asp:TextBox ID="txtCityPostal" runat="server">

解决方案

如下所示，我现在使用以下 CSS：

input.regTxt:disabled {
    font-weight:bold;
}

我已将CssClass="regTxt" 添加到我的所有文本字段中。

【问题讨论】：

标签： html css jquery-mobile disabled-input

【解决方案1】：

使用:disabled 选择器。例如：

input:disabled {
    color: #444;
    border: 1px solid #888;
}

查看这个小提琴的演示：http://jsfiddle.net/A9CN8/

All notable modern browser support :disabled，但对于 Internet Explorer 8 及以下版本，您的运气不佳：for those browsers you cannot change the look of disabled controls。

【讨论】：

【解决方案2】：

你可以使用:disabled

input[type="text"]:disabled { 
   /* This may lack browser support so go for the next selector*/
    border: 1px solid #f00;
}

Demo

或者你也可以使用element[attr=val]选择器

input[type="text"][disabled="disabled"] {
    border: 1px solid #f00;
}

Demo 2

【讨论】：

您能否具体说明：对于哪些浏览器，后者是更好的选择？
是的，我也想通了，但我不确定后一种选择在实践中是否更好。我的意思是：哪些浏览器会从后一种选择器类型中受益？
@jsalonen 这完全是正常的做法，不是 hack
我很快就会用 jsfiddle 发布和编辑，你的例子在正常情况下可以工作，但这里我使用的是 JQuery Mobile，它似乎不起作用。
@AntonBelev 没问题

【解决方案3】：

使用:disabled 选择器

input:disabled {
    color: your_color;
}

【讨论】：