Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQM, CSS: How to change disabled fields css?

I have simple JQuery Mobile form where I have textfields that could be disabled or enabled depending on some conditions. Normal enabled textfield looks like this:

enabled

and disabled looks like that:

disabled

I'd like to make the text in the disabled field a bit 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">

Solution

As suggested below I'm now using the following CSS:

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

I've added CssClass="regTxt" to all my text fields.

like image 905
Anton Belev Avatar asked Feb 15 '23 17:02

Anton Belev


1 Answers

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 element[attr=val] selector

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

Demo 2

like image 112
Mr. Alien Avatar answered Feb 27 '23 10:02

Mr. Alien