Advertisements
How to Disable a Link using Only CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS pointer-events Property
You can simply use the CSS pointer-events property to disable a link. The none value of this property specify the element is never the target of pointer events.
Let's try out the following example to understand how it actually works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable an HTML Link using CSS</title>
<style>
.disabled-link{
cursor: default;
pointer-events: none;
text-decoration: none;
color: grey;
}
</style>
</head>
<body>
<a href="somepage.html" class="disabled-link">HTML Link</a>
</body>
</html>The pointer-events property supported in all major browsers, such as Chrome, Firefox, Safari, IE11+, etc. Alternatively, you can use jQuery to remove the clickable behavior from a disabled link.
Related FAQ
Here are some more FAQ related to this topic:
- How to remove dotted line around the links using CSS
- How to disable spell checking in HTML forms
- How to create custom cursor using CSS
Advertisements
