How can I fully override Chromium disabled input field colours?

Question

Example: http://jsfiddle.net/wCFBw/25/

input {
    color: black;
}

<input type="text" value="This is black" />
<input type="text" disabled="disabled" value="Why this is not black?" />

Solution

I don't know why that happens, but I suspect WebKit is trying to be smart with respect to letting the user know the <input> is disabled.

You can workaround this by also using the -webkit-text-fill-color property:

input.black {
    color: black;
    -webkit-text-fill-color: black
}

Please, make sure you're setting the colour to something that makes it apparent that the <input> is disabled.

Here's your demo, modified with the new property: http://jsfiddle.net/thirtydot/wCFBw/38/

Comments

[denysonique]

You should have earned the l33t badge for this answer.

[denysonique]

This seems to be text-fill-color and text-stroke CSS3 stuff

[thirtydot]

No problem! This property isn't really CSS3 as such; it's a WebKit-only proprietary property. According to the link in my answer, it's Available in Safari 3.0 and later, so it's been around for a while.

[philfreo]

Great answer, thanks! Any idea how to make this work in IE8? (The color is just grey...)

[thirtydot]

@philfreo: There doesn't seem to be a good way, see: stackoverflow.com/questions/1411044/… - 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): jsfiddle.net/wCFBw/40

[philfreo]

Thanks - that confirms what I thought

[Venzentx]

@thirtydot is there anyway to change the background colour instead of font-colour for highlighting purpose ?

[rojobuffalo]

-webkit-text-fill-color: currentcolor Thanks for the link to the API.