How to disable a link using only CSS?

Question

Is there any 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.

Answer 1

You can set href attribute to javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

Answer 2

Demo here
Try this one

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

Answer 3

CSS can only be used to change the style of something. The best you could probably do with pure CSS is to hide the link altogether.

What you really need is some javascript. Here's how you'd do what you want using the jQuery library.

$('a.current-page').click(function() { return false; });

Answer 4

If you want to stick to just HTML/CSS on a form, another option is to use a button. Style it and set the disabled attribute.

E.g. http://jsfiddle.net/cFTxH/1/

Answer 5

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

That's not the only way you disable a Link, but a good CSS way which work in IE10+ and all new browsers:

.current-page {
  pointer-events: none;
  color: grey;
}

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

Answer 6

pointer-events:none will disable the link:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>