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?" />
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?" />
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/
Available in Safari 3.0 and later
, so it's been around for a while.
Apr 1, 2011 at 21:52
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
May 12, 2011 at 18:55