Change the appearance of a disabled link

Question

Is it possible to change the appearance of an html link when it's disabled? For example using something like:

a.disabled
{
  color:#050;
}

<a class="disabled" disabled="disabled" href="#">Testing</a>

The example above does not seem to work with IE but works for Firefox, on IE it remains gray even when I set the colour in the style. If I remove the disabled="disabled" however it works.

Answer 1

The :disabled pseduo class only works with input fields, like text, radio, checkbox, etc. and applies when you give the element the attribute `disabled="disabled". IE6, however, doesn't recognize the pseudo class, so you'll need to use a class separately to make it work.

<input type="text" value="You can't type here" disabled="disabled" class="disabled" />

can be styled with

input[disabled="disabled"], input.disabled {
    /* whatever you want */
}

The pseudo class will apply to modern browsers while the class will cover IE6.

Like Radeksonic said, if you want the disabled CSS to appear on other elements, like anchors, you'll just need to make and use a class. There's no disabled attribute for <a>s

Answer 2

For a link like the one you provided in the comment:

<a href="#" disabled="disabled">some link</a>

The style would be (just like any other selector based on an attribute):

a[disabled=disabled] {
  color: red;
  font-weight: bold;
}

If I was in your place, I'd check for cross-browser behavior, though. I haven't seen the disabled attribute used before.