Overriding IE default CSS for disabled inputs

Question

IE 7 applies its own font color to disabled inputs. How can I override this and set my own font color?

Answer 1

IE7 supports the [attr] selector, so you can simply use:

input[disabled]
{
  color: red;
}

This may cause issues with DHTML (you'll have to try it), in which case you may want to additionally set a class when working on dynamic elements:

input.disabled,
input[disabled]
{
  color: red;
}

Note that [attr] is the "has attribute" selector, there are a bunch of other selectors in the CSS spec. Because disabled is a boolean attribute, you only have to check for its existence rather than any particular value.

Answer 2

Give your input a class and add the styling via css.

Html:

 <input class="dis" disabled="disabled" value="something"></input>

CSS

.dis{color:red;}

Working Example: http://jsfiddle.net/TQUhD/1

As Diodeus comments :disabled is not supported in IE: http://reference.sitepoint.com/css/pseudoclass-disabled

Answer 3

No need to overrride CSS use class based approach and play with events works perfectly

You can do one thing: <button class="disabled" onmousedown="return checkDisable();" >

function checkDisable() {

    if($(this).hasClass('disabled') { return false;}

}

Answer 4

There is no style for disabled. CSS3 supports :disabled, but IE7 doesn't.

kmb385's suggestion is probably the best you can do.