Advertisement
Advertisement



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.

2017/09/29
1
858
9/29/2017 2:06:38 AM

Accepted Answer

The answer is already in the comments of the question. For more visibility, I am copying this solution here:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support IE there is a workaround; see this answer.

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

2018/04/15
1367
4/15/2018 2:36:07 PM

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

2018/04/15

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; });
2010/01/19

CSS can't do that. CSS is for presentation only. Your options are:

  • Don't include the href attribute in your <a> tags.
  • Use JavaScript, to find the anchor elements with that class, and remove their href or onclick attributes accordingly. jQuery would help you with that (NickF showed how to do something similar but better).
2010/01/19

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
<button type="button" class="btn btn-link">Link</button>
2018/04/15

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

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>

2018/04/15

Source: https://stackoverflow.com/questions/2091168
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]