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

how to get text in disabled option to change color in IE9?

Something like this?

select :disabled.red {
    color: red;
}

Here's a document about the :disabled pseudo-class from Microsoft.

Here's a fiddle that should work in IE9 and up.

---

Update: This seems to work only in IE>8. This answer points out the workaround of using the readonly attribute on form elements. That's not an option for the option tag though.

There are JavaScript workaround for old IEs around. A simple Google search led me to this site which provides a jQuery solution.

From the blog:

By adding a little css styling magic and you end up with an identical
outcome in all other modern browsers.

You can then enable and disable using javascript. Many people have
written code which makes an option look like it’s disabled, waits for
a click on the option element and then bluring it or focusing the next
/ previously selected option to make it act like it’s disabled.

I have come up with functions used with jQuery to disable / enable a
select option by converting it to an optgroup and back. It is tested
in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9
(although the opgroups jump to the bottom)

Change the font color of disabled input text box?

There is no way to do it - what you can do instead though is change the input to readonly:

<input class="TextBoxAsLabel" data-val="true" data-val-number="blah" readonly="readonly" id="Total" name="XTotal" type="text" value="$0.00" />

This will give you the disabled functionality but preserve styling :)

See this post for more details: How to change font-color for disabled input?

Hope This Helps.

font-color of disabled input box in IE

It depends of what you need but you may trick that using the readonly property on the input, making the background grey and the typo the way you want with CSS.

But, for example, if you use it in a form and PHP, with disable, the variable isn't sent, with readonly, it is... It might be a problem.

---

Related Topics