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