JQM, CSS: How to change disabled fields css?

Question

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.

score 4 · Answer 1 · answered Jul 31 '13 at 13:14

4

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

answered Jul 31 '13 at 13:14

Mr. Alien

153,751
34
298
278

Can you specify: for which browsers the latter is a better option? – jsalonen Jul 31 '13 at 13:25
Yeah I figured that out too, but I'm not sure if the latter option is any better in practice. I mean: which browsers would benefit from the latter selector type? – jsalonen Jul 31 '13 at 13:27
@jsalonen It's completely normal practice, it's no hack – Mr. Alien Jul 31 '13 at 13:27
I'll post and edit with jsfiddle shortly, your examples would work in normal situation, but here I'm using JQuery Mobile and it seems that it is not working. – Anton Belev Jul 31 '13 at 13:32
@Mr.Alien thanks for your answer, but I'll select the jasalonen's one since he has less rep than you. +1 – Anton Belev Jul 31 '13 at 13:50
@AntonBelev hehe no issues :) – Mr. Alien Jul 31 '13 at 13:53

score 3 · Accepted Answer · edited May 23 '17 at 11:53

3

Use :disabled selector. For example:

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

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

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

edited May 23 '17 at 11:53

Community

1
1

answered Jul 31 '13 at 13:14

jsalonen

29,593
15
91
109

score 1 · Answer 3 · edited Jul 31 '13 at 15:15

1

Use the :disabled selector

input:disabled {
    color: your_color;
}

edited Jul 31 '13 at 15:15

Mr. Alien

153,751
34
298
278

answered Jul 31 '13 at 13:16

Michael Unterthurner

921
1
10
25

JQM, CSS: How to change disabled fields css?

3 Answers3