How to Style Disabled Textarea in IE8

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 ;)

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. :-/

Using :disabled in CSS disabled button style b0rks IE8

IE8 ignores the rule, since it doesn't understand :disabled.

A little research goes a long way: How do you style disabled textarea in IE8?

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.

IE 8 disabled textbox issue

IE8 does not support the :disabled pseudo-class (see MDN).

Try using input[disabled] instead.

Disabled textarea

The easiest way is to use readonly instead.

Because you could move the scroll to a wrapping element, but IE has another issue where it will scroll the body at the same time as you scrolling the element which requires javascript hacks to fix afaik.

textarea {  height: 100px;  overflow-y: scroll;}
/* Simulate disabled look how you please */textarea[readonly="true"] {  color: #333;  background-color: #f0f0f0;}

<textarea readonly="true">Hello World Hello World Hello World Hello WorldHello World Hello WorldHello World Hello WorldHello World Hello WorldHello World Hello WorldHello World Hello WorldWorldHello World Hello WorldHello World Hello WorldHello World Hello WorldHello World Hello World</textarea>

textarea {  margin: 5px;  }
textarea.ok_class:disabled, textarea.ok_class:disabled {  border: 1px solid green;}
textarea.not_ok_class:read-only {  border: 1px solid red;}
textarea.not_ok_class:disabled,textarea.not_ok_class:disabled {  border: 1px solid red;}

<textarea name="ta_1" disabled class="ok_class">Without read-only 1</textarea><br><textarea name="ta_2" disabled class="ok_class">Without read-only 2</textarea><br><textarea name="ta_3" disabled class="not_ok_class">With read-only 1</textarea><br><textarea name="ta_4" disabled class="not_ok_class">With read-only 2</textarea>