Anchor tag when disabled, the text turns gray in IE

Question

I am having a anchor tag whose text is turning gray when disabled. I know this the default IE treatment of anything that is disabled.

I am trying to overwrite the color of the anchor tag with the below mentioned CSS using a[disabled=""] and a[disabled="disabled"]. However both classes are not working.

<a href="www.google.com" disabled="">Google</a>

CSS:

a:link, a:active, a:visited {
color: blue !important;
display: block;
font: bold 12px;
padding-left: 5px;
position: relative;
text-decoration: none;
width: auto;
line-height: 35px;
}

a.[disabled=""] , a[disabled="disabled"]
{
color: blue !important;
cursor: default;
}

Another method which I tried, is using a JQuery to add inline style.

if ($("a").attr('disabled', "")) {
  $("a").css({ "color": "blue" })
}

None of the above is working. Is there any solution for this?

According to [this answer](http://stackoverflow.com/questions/1411044/how-to-change-color-of-disabled-html-controls-in-ie8-using-css), you're out of luck. — jdlm, Jul 24 '15 at 05:47
Although it may not solve you issue, you do have a syntax error in one of your CSS selectors. Change `a.[disabled=""] , a[disabled="disabled"]` to `a[disabled]`. The mistake you made was adding an accidental period, causing it not to select the tag. By only having the disabled attribute in the selector, the CSS will select the a tag as long as the *disabled* attribute exists on the `a` tag. — William Callahan, Jul 24 '15 at 05:47
Thanks for that. That was an issue while copy pasting the code. — Archana, Jul 24 '15 at 05:49
I guess You cant override that IE Behaviour using CSS or Javascript. — user1608841, Jul 24 '15 at 05:50

score 3 · Answer 1 · edited Apr 10 '23 at 13:16

As per the specs, the a element does not have a disabled attribute! It is not an element that can be disabled.

As per https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:

interface HTMLAnchorElement : HTMLElement {
  attribute DOMString target;
  attribute DOMString download;
  [PutForwards=value] attribute DOMSettableTokenList ping;
  attribute DOMString rel;
  readonly attribute DOMTokenList relList;
  attribute DOMString hreflang;
  attribute DOMString type;

  attribute DOMString text;

  // also has obsolete members
};

And, as per https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements:

An element is said to be actually disabled if it is one of the following:

a button element that is disabled

an input element that is disabled

a select element that is disabled

a textarea element that is disabled

an optgroup element that has a disabled attribute

an option element that is disabled

a fieldset element that is a disabled fieldset

a form-associated custom element that is disabled

If you find yourself trying to disable an anchor (a), you are doing it wrong.

If you really need to indicate that an a is disabled and should not respond to the interactions with it, then you may use pointer-events css property to make it so. (pointer-events property is supported by all modern browsers, but not by IE < 11)

Example Snippet:

a.disabled { 
    pointer-events: none;
    color: rgba(0,0,128,0.5);
}

<a href="#">this is a normal link</a> | <a href="#" class="disabled">this appears to be disabled</a>

##Edit:

Per your comment, if you need to support older version of IE, then you could:

Use jQuery to prevent the default behaviour (e.preventDefault()), or
Remove the href attribute and style such a (without href) appropriately.

The example below, shows all three options (including the one given earlier):

Example Snippet 2:

$("a.disabled").on("click", function(e) {
    e.preventDefault();
});

a.disabled { 
    pointer-events: none;
    cursor: default;
    color: rgba(0, 0, 128, 0.5);
}
a:not([href]) {
    text-decoration: underline;
    color: rgba(0, 0, 128, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com">this is a normal link</a> | 
<a>this is a disabled link</a> | 
<a href="http://example.com" class="disabled">this appears to be disabled</a>

I agree with you. But `pointer-events: none;` does not work for IE. Any other alternative? — Archana, Jul 24 '15 at 09:54
@Archana: I have edited the answer and have added two more options for you. — Abhitalks, Jul 24 '15 at 13:19

AndrewR · Answer 2 · 2015-07-24T05:56:59.640

0

Here is how you can set it, using either CSS or jQuery. Both your syntax for CSS and jQuery are incorrect.

$('a[disabled]').css('color', 'blue');

a[disabled]{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" disabled="disabled">Test</a>

edited Jul 24 '15 at 05:56

answered Jul 24 '15 at 05:51

AndrewR

6,668
1
24
38

score 0 · Answer 3 · answered Jul 24 '15 at 10:51

Firstly thanks to @Abhitalks for guiding on the specs. Combining his hint, I have come up with a solution for my question:

1) I am adding a class 'disabled' to the anchor element whenever I want to disable it:

$("a").addClass("disabled");

2) Since pointer-events: none; does not work for IE, I have the below snippet that can do out work across all browsers:

$("a").click(function (e) {
    e.preventDefault();
});

3) Define a class in CSS for the 'disabled' class:

a.disabled {
 color:red;
}

There you go! We are done!

P.S: Please Note! If you would like to disable the preventDefault(), below code to be used:

$("a").unbind('click');

Anchor tag when disabled, the text turns gray in IE

3 Answers3