Is it possible to change the appearance of an html link when it's disabled? For example using something like:
a.disabled { color:#050; }
Testing
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.
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
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
<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.
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.
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:
<a href="foo.htm" class="disabled" onclick="return false;">linky</a>