How to Change Color of Disabled HTML Controls in IE8 Using CSS

How to change color of disabled html controls in IE8 using css

Unfortunately if you use the disabled attribute, no matter what you try IE will just default the color of the text to Grey, with a weird white shadow...thing... yet all other styles will still work. :-/

How to change font-color for disabled input?

You can't for Internet Explorer.

See this comment I wrote on a related topic:

There doesn't seem to be a good way,
see:
How to change color of disabled html controls in IE8 using css
- you can set the input to readonly instead, but that has other
consequences (such as with readonly,
the input will be sent to the server
on submit, but with disabled, it won't
be): http://jsfiddle.net/wCFBw/40

Also, see: Changing font colour in Textboxes in IE which are disabled

Changing font colour in Textboxes in IE which are disabled

I noticed that you can change the colour of text in textboxes which are disabled in Firefox

I think what the question is trying to say is that this:

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

Results in grey text in IE, vs. red in Fox. FWIW, Opera also gives grey, whilst the WebKit browsers give red.

This is a pure CSS issue to do with how much form fields are rendered according to the OS's widget set and how much according to the CSS rules. This has always been an area of great cross-browser difference. Scripting is not relevant, much though SO would like “use jQuery” to be the answer to every question.

The usual workaround is to use ‘readonly’ instead of ‘disabled’, then use styling (eg. based off ‘class="disabled"’) to reproduce whatever shaded disabled effect you want. ‘readonly’ controls are not turned into OS-level-disabled widgets, giving you more latitude to style them.

How do you style disabled textarea in IE8?

the :pseudo class in the selector is tripping up IE8!

you have to ungroup these selectors if you absolutely have to use those CSS3 pseudo classes;

If there's a selector in the ruleset that IE8 doesn't understand it's ignoring the whole thing - this is common in IE8 with CSS3 pseudo classes

e.g. If you separate them out and remove the pseudo :disabled parts of the selector completely - you'll see the first example below works for all, whereas the second one still works except for IE7

input[disabled], select[disabled], textarea[disabled] {background-color: #0f0;} /* lime green - works in IE7+ and modern browsers */

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {background-color:#ff0;} /* yellow -  IE8+ and modern browsers */

the color (as opposed to background-color) issue pointed at in another answer is not the cause of your issue, but it wouldn't help if you were also trying to change the color ;)

Apply text color on disabled=true textbox

input[disabled='disabled'] {
  color:blue;
  }

source

---

Related Topics