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

I don't know to what extent the disabled attribute is supported for hyperlinks. Make sure you test thoroughly. I see two ways of targeting this in CSS:

CSS 2.1

You can try the CSS 2.1 attribute selector

a[disabled=disabled] { color: blue }

I think this is most likely to work with a non-form element. Doesn't work in IE <= 6. Quirksmode compatibility table.

CSS 3

In CSS 3, it's possible to use the :disabled pseudo-class (source)

input:disabled {  background-color: yellow; }

doesn't work in any IE including 8. Works in Firefox, Chrome and Opera. Quirksmode compatibility table

I've never seen disabled used on a normal hyperlink so you will have to try whether that works. Per the specification, the disabled pseudo-class is for disabled form elements only.

Answer 2

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 3

I don't think there is a 'disabled' attribute for hyperlink (anyway it doesn't respect w3c recommandations) but you can try to add class for styling these elements like :

<a class="inactive" ...>...</a>

And for the css :

a.inactive {
  color:#000
}