JQM, CSS: How to change disabled css fields?

Question

I have a simple jQuery Mobile form where I have text fields that you can turn off or on depending on some conditions. The normal text box looks like this:

and disabled looks like this:

I would like to make the text in the disabled field a little more readable. How can i do this?

HTML

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

Decision

As shown below, I use the following CSS:

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

I added CssClass="regTxt" to all the text fields.

Answer 1

Use the selector :disabled . For instance:

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

See this script for a demo: http://jsfiddle.net/A9CN8/

All the notable modern browser support: disabled , but for Internet Explorer 8 and below you are out of luck: for these browsers you cannot change the appearance of disabled controls .

Answer 2

You can use :disabled

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

Demo

Or you can also use the element[attr=val] selector

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

Demo 2

Answer 3

Use the selector :disabled

 input:disabled { color: your_color; }