How To Disable Anchor Tag In Css

• 09 September 2022, 16:06

Disable HTML anchor with CSS  pointer-events: none 

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style.

pointer-events: none will disable all click events on the anchor element.

For example: 

<a href="https://google.com" style="pointer-events: none">Google.com</a>

The pointer-events can be set using CSS properties and selectors:

<style>
.disabled-link {
  pointer-events: none;
}
</style>
<a href="https://google.com" class="disabled-link">Google.com</a>

This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.

<style>
/* not recommended */
a {
  pointer-events: none;
}
</style>
<a href="https://google.com">Google.com</a>

 

 

Tagged in :