jquery ui disabled button unwanted text shadow in IE

Question

I have link which is a Jquery UI style button. When I set disabled="disabled" ie8 renders the text with a white drop shadow. I can't tell where it is getting this style from. I have inspected the <a> tag, and it's two <span> children with ie dev tools and there are no styles which seem to relate to this.

I also looked through the UI stylesheet for any filter: or dropshadow properties, but alas there were none.

I also tried overriding the style even though I couldn't be sure where it was coming from, with:

a.ui-state-disabled {

color:black !important;

}

But to no avail. Any suggestions?

Answer 1

This has nothing to do with jquery-ui. IE adds its own style to links with attribute disabled="disabled". It can't be overridden.

Answer 2

Adripants is right.It can't be overridden, but you have another way to do it:

First: Add your custom disable style to your css stylesheet

a.disabled {
    color:black;
}

Then: Remove the "disabled" attribute and add your custom class only for IE

<!--[if IE]>
<script type="text/javascript">
    $(function () {
        $("a:disabled, a[disabled='disabled']").addClass("disabled").removeAttr("disabled");
    });
</script>
 <![endif]-->