Menu
Is there a way to disable a link using CSS?
I have a class called current-page and want links with this class to be disabled so that no action occurs when they are clicked.
314
In order to disable a HTML Anchor Link (HyperLink), the value of its HREF attribute is copied to the REL attribute and the value of HREF attribute is set to an empty JavaScript function. This makes the HTML Anchor Link (HyperLink) disabled i.e. non-clickable.
It is still possible to disable a link by following 3 steps: remove the href attribute so that it can no longer receive the focus. add a role="link" so that it is always considered a link by screen readers. add an attribute aria-disabled="true" so that it is indicated as being disabled.
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. 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.
All you have to do is delete the code at the top of the HTML! Once you do, the page automatically unlinks from the stylesheet.
From this solution:
[aria-current="page"] { pointer-events: none; cursor: default; text-decoration: none; color: black; }<a href="link.html" aria-current="page">Link</a>For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support Internet Explorer, there is a workaround; see this answer.
Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.
161
answered Sep 19 '22 06:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With