Like all things web development projects there is an easy way to do things and there is a complicated way to achieve the same result. This is no exception when you want to disable a link in HTML.
Sure you can disable a link in HTML only using the
onclick event with a value set to “return false”. That works but like everything HTML it is not very portable.
A CSS only solution can be ideal where you are targeting active links in certain media types while not in others. An example would be when you need a phone link active on mobile devices but not on say a Desktop computer.
With that said let us dive right in and see the CSS solution. You just need a single CSS selector set on an HTML element, class or ID to achieve what you need. This takes care of the technical aspects of this solution. We then add two more selectors to help out the human factor in what you are trying to do. The solution involves the following:
How to Disable a Link in CSS
- Set the pointer-events selector to none this stops the click or any other events being triggered on the element
- Set the A cursor or pointer is an indicator used in computer user interfaces such as monitors or other display devices to show the current position of user interaction with the task at hand. The indicator here is usually represented as an arrow in the default state. Based on the function or the software the user is interfacing with, the cursor may... More to default to make it visually clear that when a A computer mouse is a handheld hardware input device that controls a cursor in a GUI (graphical user interface) used to control actions such as selecting objects, highlighting text, positioning the focus, activating menus, drawing, painting and more. Depending on the device and underlying platform, in its most basic form, the mouse usually has one or more buttons, and a... More is over the element nothing happens
- Set the opacity lower to dim the text on the link. If it an image link then it may not be necessary depending on the type of image used
The code below illustrates the above in use.
What About IE?
The above solution works in most modern web browsers. For those still lingering in the IE world, you will need to put in a few extra minutes to accommodate that web browsers needs. In IE the above solution will not work. The workaround is to leverage the disabled attribute of the “a” element. All other browsers will ignore it since the disabled attribute is not standard in HTML but it is according to IE. The example below shows what you need to do for IE.
There you have it. You can now comfortably disable links and build on the method to suit your needs as appropriate.