Overriding disabled input and textarea with CSS

Question

Hi,

Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:

input[@disabled=true], input[@disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
    color: black !important;
}

Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.

Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.

Answer 1

I would prefer to go the JavaScript way to achieve best browser compatibility. I would use the ExtJS [http://www.extjs.com/deploy/ext-1.1.1/docs/output/Ext.DomQuery.html][DomQuery] and insert the CSS rules by adding specific class or directly injecting them as style attribute values.