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.

What do you mean by a disabled _link_. Are you referring to input buttons? — Sinan Taifour, Jul 21 '09 at 16:51
How can you tell? I haven't seen that as a _common practice_. The tags don't point in any special direction either. — Sinan Taifour, Jul 21 '09 at 16:54

score 22 · Accepted Answer · answered Jul 21 '09 at 17:00

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

This doesn't work for me in IE8. Any thoughts? Also in addition: what would be syntax for 2 selectors eg. disabled and type="text". — the berserker, Jul 14 '10 at 15:37

score 13 · Answer 2 · answered Jul 21 '09 at 17:02

13

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.

answered Jul 21 '09 at 17:02

Sinan Taifour

10,521
3
33
30

2

With the caveats that attribute selectors don't work in IE<7, and the disabled attribute isn't valid markup. – Matt Sach Jul 21 '09 at 17:05
And that "disabled" only applies to form elements, not anchors – Andrew Jul 21 '09 at 17:07

score 3 · Answer 3 · answered Jul 21 '09 at 16:51

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

answered Jul 21 '09 at 16:51

Will this only work if his `` tags are given a class named "disabled"? – Ken Browning Jul 21 '09 at 17:02
yes, it's looking for a elements with a class of 'disabled', and will ignore anything else. – Val Jul 22 '09 at 21:31
To apply this to all elements with class 'disabled', remove 'a.'. – Jul 25 '09 at 08:58

score 1 · Answer 4 · answered Jul 21 '09 at 17:02

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>

score 1 · Answer 5 · answered Mar 23 '17 at 10:59

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.

I used ` a[disabled] { pointer-events: none; cursor: not-allowed; ` } And of course in the chrome Elements inspector, the `` had the attribute disabled. I had to do it with a "disabled" class name instead of by attribute — tommyalvarez, Aug 08 '18 at 11:54
@tommyalvarez it works fine in all browsers. See this test https://jsfiddle.net/9gLu0c3r/2/ — DreamTeK, Aug 08 '18 at 12:50

score 0 · Answer 6 · answered Jul 21 '09 at 17:00

0

<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.

answered Jul 21 '09 at 17:00

mveerman

38,827
3
22
14

score -1 · Answer 7 · edited Feb 29 '12 at 10:47

-1

if you use JQUERY you can add attribute to anchor

.attr("disabled","true")

and remove it

.removeAttr("disabled")

edited Feb 29 '12 at 10:47

Sergey Glotov

20,200
11
84
98

answered Feb 29 '12 at 10:03

tmz

1

3

I think it should be `$(element).attr("disabled","disabled")` not `true` – Ahmad Alfy Oct 26 '12 at 14:12

Change the appearance of a disabled link

7 Answers7

Linked