Reputation: 734
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
<a href="link.html" class="active">Link</a>
.active {
pointer-events: none;
cursor: default;
}
Upvotes: 7
Views: 5649
Reputation: 158
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;
}
Upvotes: 2
Reputation: 892
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.
Upvotes: 7
Reputation: 1678
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.
Upvotes: 2
Reputation: 461
CSS way to disable links:
a[disabled]{
pointer-events: none;}
else you can use javascript to disable links:
$("td > a").attr("disabled", "disabled");
Upvotes: 2