Disable html anchor in Internet Explorer

Question

I am getting a problem in my application, where i want to disable html anchor with css, I have seen a solution in Disable link using css, which is working fine in Chrome and Firefox, but when i am opening my page to Internet Explorer, It could not be disabling, I have gone through many links but i didn't get any solution for internet explorer, Please help me if you have any helpful link or answer. Thanks in advance

http://jsfiddle.net/7EQJp/

<a href="link.html" class="active">Link</a>

.active {
       pointer-events: none;
       cursor: default;
}

Rahul Singh · Accepted Answer · 2015-10-09T13:23:02.563

7

You can use pointer-events css property to disable the links but they have known issues with ie. Starting from ie 11 this property is supported. There is a little hack. You should add disabled class to links and add disabled attribute to the link then add css that is given below. Also you need to provide pointer-events none for disabled anchor attribute. After these two this should work in most browsers.

a.disabled {
    pointer-events: none;
}

a[disabled] {
    pointer-events: none;
}

See this fiddle.

edited Oct 09 '15 at 13:23

answered Oct 09 '15 at 13:15

Rahul Singh

892
9
24

Yeah this trick is working fine in ie. Thanks @Rahul for your answer – Praveen Rawat Oct 09 '15 at 13:22

score 2 · Answer 2 · answered Oct 09 '15 at 13:07

2

CSS way to disable links:

a[disabled]{
pointer-events: none;}

else you can use javascript to disable links:

$("td > a").attr("disabled", "disabled");

answered Oct 09 '15 at 13:07

Nikson K John

455
5
13

score 2 · Answer 3 · answered Oct 09 '15 at 13:12

2

Pointer events was originally only Mozilla. It's been adopted in -webkit- but unfortunately not in IE. And now that they have Edge. I guess it won't ever be the case.

From the MDN docs:

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

answered Oct 09 '15 at 13:12

Jay

1,688
5
20
34

then means without using javascript we can't disable a link in ie @Jay – Praveen Rawat Oct 09 '15 at 13:16

score 2 · Answer 4 · answered Oct 09 '15 at 13:40

i am also facing this type problem. but i use this solution in my code and its working.

.disableButton {
    background: #e6eeee none repeat scroll 0 0;
    border: 2px solid #cdcdcd;
    border-radius: 20px/40px;
    color: #dcd7dc;
    cursor: pointer;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    image-rendering: inherit;
    padding: 5px 30px;
    pointer-events: none;
    text-decoration: none;
    display : inline-block;
   }

Disable html anchor in Internet Explorer

4 Answers4