How to Disable a Link in HTML Using CSS and no JavaScript

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 could definitely use some JavaScript or jQuery and these form some elegant functionality. But what if you want a simple solution with little fuss and overhead? Enter CSS. Of course, there is always a gotcha when it comes to programming and again there is no exception here, that brings us to the old trusty Internet Explorer. We will come to that later though.

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.

You can use JavaScript or even take advantage of jQuery but these solutions require a little bit more thought and code even though in many cases they could be the best solution to the problem at hand. Using JavaScript you could intercept the clicks, you could use fake click handlers or sorts.

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

1. Set the pointer-events selector to none this stops the click or any other events being triggered on the element
2. Set the cursor to default to make it visually clear that when a mouse is over the element nothing happens
3. 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.

.disabled-link {
        pointer-events: none;
        cursor: default; 
        opacity: 0.5;
} 

<a href="#" class="disabled-link">This link is disabled</a>

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 browser’s 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.

a[disabled] {
 pointer-events: none;
 }

There you have it. You can now comfortably disable links and build on the method to suit your needs as appropriate.

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.