How to override disabled hyperlinks styling?

Question

Is it possible to override the styling that is applied to a hyperlink if it has the disabled="disabled" attribute?

It's currently greyed out. Not bothered about making it an active link, just want to change the font, color, etc.

UPDATE : Must work in IE6, IE7 & FF

UPDATE : It's worse than I though the html is <A id="someId" disabled>About Your Group</A>

UPDATE : I'm going to really have to see what is adding this 'disabled' to the links.. I think it's a jquery plugin.. (ui.tabs, jquery ui.tabs)

Answer 1

The disabled property can't be used on a elements. it only applies to input, select and button elements.

Sure; Internet Explorer puts a bevel-effect on links with this property set. FireFox, on the other hand, ignores this property completely.

Note: Links will still function. Their default behavior is NOT prevented--they just look disabled. They do not behave like a disabled text input.


You are better off using a class to signal if a link is disabled. This will work cross-browser as well...:

The CSS

.disabled { color: #ccc; }

The HTML

<a href="..." class="disabled">...</a>

And to complete the disabled effect; using jQuery, you can select all links with the class "disabled" and prevent their default behavior, like so:

$(function ()
{
    $("a.disabled").click(function ()
    {
        // return false to disable the link (preventDefault = true)
        return false;
    });
});

Answer 2

I've noticed that ASP.Net puts disabled="disabled" on <a> tags when setting the Enable property to false on an <asp:HyperLink>.

This causes css-rules for that element to be ignored in IE (even for a[disabled="disabled]!), which is extremely annoying. Other browsers don't care, since they ignore that property.

My solution was to simply set the NavigationUrl property to null in the code-behind for the elements I wanted to disable.

The advantage of doing this server side instead of with JavaScript is that it will work even if users have JavaScript turned off.