CODEWITHSUNDEEP
htmlcssinternet-explorer
Ben G
Ben G

Reputation: 26771

Overriding IE default CSS for disabled inputs

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

Upvotes: 1

Views: 10561

Answers (4)

Navneet Nagpal
Navneet Nagpal

Reputation: 19

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;}

}

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

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.

Upvotes: 4

Kevin Bowersox
Kevin Bowersox

Reputation: 94449

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

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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

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

Upvotes: 0

Related Questions