To disable a link using CSS,
pointer-events property can be used, which sets whether the element in the page has to respond or not while clicking on elements.
property-events property of CSS controls the responds of HTML elements for any mouse/touch events. While setting disable attribute, none of the elements will react for any action which is assigned.
property-events: auto | none
Minimum Browser Support: Google Chrome 2.0, Internet Edge 11.0, Mozilla 3.6, Safari 4.0, Opera 9.6 and above
HTML Code 1:
Below code shows the use of property-events where ‘a’ tag is disabled, with no cursor (disabled cursor pointer on ‘a’ tag)
We can notice that although it looks like a link, nothing happens when we take pointer on it or click on it..
HTML Code 2
This code shows CSS which applies to an ‘a’ tag so that it looks like, that the link is disabled, to do so,
text-decoration property can be used.
Here it can be seen that it does not even look like a link.
- How to disable a CSS :hover effect?
- How to disable tabs in Bootstrap ?
- How to disable zoom on a mobile web page using CSS?
- How to disable resizable property of textarea using CSS?
- How to disable text selection highlighting using CSS?
- jQuery | disable/enable an input element
- How to disable browser Autocomplete on web form field/input tag?
- How to disable paste protection in Mozilla Firefox Developer Console?
- How to enable/disable all input controls inside a form element using jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.