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

Answer 1

Demo here
Try this one

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

Answer 2

I used:

.current-page a:hover {
pointer-events: none !important;
}

And was not enough; in some browsers it still displayed the link, blinking.

I had to add:

.current-page a {
cursor: text !important;
}

Answer 3

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 4

Another trick is to place a invisible element above it. This will disable any hover effects as well

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

Answer 5

I searched over internet and found no better than this. Basically to disable button click functionality, just add CSS style using jQuery like so:

$("#myLink").css({ 'pointer-events': 'none' });

Then to enable it again do this

$("#myLink").css({ 'pointer-events': '' });

Checked on Firefox and IE 11, it worked.

Answer 6

If you want it to be CSS only, the disabling logic should be defined by CSS.

To move the logic in the CSS definitions, you'll have to use attribute selectors. Here are some examples :

Disable link that has an exact href: =

You can choose to disable links that contain a specific href value like so :

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

Disable a link that contains a piece of path: *=

Here, any link containing /keyword/in path will be disabled

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Disable a link that begins with: ^=

the [attribute^=value] operator target an attribute that starts with a specific value. Allows you to discard websites & root paths.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

You can even use it to disable non-https links. For example :

a:not([href^="https://"]){
  pointer-events: none;
}

Disable a link that ends with: $=

The [attribute$=value] operator target an attribute that ends with a specific value. It can be useful to discard file extensions.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Or any other attribute

Css can target any HTML attribute. Could be rel, target, data-customand so on...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combining attribute selectors

You can chain multiple rules. Let's say that you want to disable every external link, but not those pointing to your website :

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Or disable links to pdf files of a specific website :

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Browser support

Attributes selectors are supported since IE7. :not() selector since IE9.