Change the appearance of a disabled link - html

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:
some link
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.

Answer 3

Use
a.disabled
{
color: #CCC;/* Just an example */
}
Just use a dot followed by a class name to indicate that you want to use that class.
It works in all browsers

Answer 4

Of course, just adding a class to style your <a> elements in a particular way isn't going to stop them actually performing their normal action. For that, you'll need javascript. In a basic fashion, you could have:
linky

Answer 5

You could use the attribute selector for full browser support.
This will be sufficient:
a[disabled] {
display:none;
}
ATTRIBUTE SELECTORS
[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val]
Match when the element's "att" attribute value is exactly "val".
[att~=val]
Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either.
[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.

Answer 6

<a class="disabled">My disabled link</a>
a.disabled {
display:none;
}
There are only 5 (I think) pseudo-class selectors for links: link, visited, hover, and active, and focus.

Answer 7

if you use JQUERY you can add attribute to anchor
.attr("disabled","true")
and remove it
.removeAttr("disabled")