How can I fully override Chromium disabled input field colours?

Question

input {
    color: black;
}

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

score 21 · Accepted Answer · answered Apr 01 '11 at 21:37

21

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/

answered Apr 01 '11 at 21:37

thirtydot

You should have earned the l33t badge for this answer. – denysonique Apr 01 '11 at 21:47
This seems to be text-fill-color and text-stroke CSS3 stuff – denysonique Apr 01 '11 at 21:49
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. – thirtydot Apr 01 '11 at 21:52
1

Great answer, thanks! Any idea how to make this work in IE8? (The color is just grey...) – philfreo May 12 '11 at 18:41
2

@philfreo: There doesn't seem to be a *good* way, see: http://stackoverflow.com/questions/1411044/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/ – thirtydot May 12 '11 at 18:55
Thanks - that confirms what I thought – philfreo May 12 '11 at 22:22
@thirtydot is there anyway to change the background colour instead of font-colour for highlighting purpose ? – Venzentx Nov 13 '13 at 14:09
`-webkit-text-fill-color: currentcolor` Thanks for the link to the API. – rojobuffalo Mar 31 '15 at 19:20

1 Answers1