How to disable a link using only CSS

Question

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

• RSK: after a lot of googling i got the perfect answer for this question css-tricks.com/pointer-events-current-nav
• Armen Michaeli: Whether a link should be used or not carries more semantical than presentational value. It should not be disabled through CSS, but through utilizing the hidden attribute that is applicable to any HTML element. CSS then can be used to select e.g.a[hidden] anchor and style it accordingly.
• user1794469: @amn but i don't think browsers will display an element with the hidden attribute so styling becomes moot.
• Armen Michaeli: @user1794469 They will if you instruct them to, with CSS, using display: block, for instance or some other value for display. But hidden is not always applicable -- it's for elements that are irrelevant, and from the question it is not unclear why the link should be disabled. This is probably a case of XY problem.
• Andy: Clicking is just one form somebody can interact with a link. Avoiding any event on click is therefore not really disabling the link entirely. Search engines as well will still consider the link.

Answer 1

From this solution:

[aria-current="page"] {
 pointer-events: none;
 cursor: default;
 text-decoration: none;
 color: black;
}

<a href="link.html" aria-current="page">Link</a>

For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support Internet Explorer, 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 CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.

• Jono: Also, this doesnt avoid tabbing to the link then enter.
• DNRN: If you would style it a bit, so the user can see it's disabled. Give it some opacity: .2
• Keavon: This now works in all modern browsers including IE 11. If you need support for IE 10 and below, you can use a JavaScript polyfill such as this one.
• Pikamander2: Important note: This only disables clicking, not the actual link itself. You can still use tab + enter to "click" the link.
• Quinn Comendant: Use of pointer-events: none; is not perfect. It also disables other events such as hover, which is required for display of title="..." or tooltips. I found the JS solution is better (using event.preventDefault();) along with some CSS (cursor: default; opacity: 0.4;) and a tooltip explaining why the link is disabled.

Answer 2

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

<a href="#" class="disabled">link</a>

• dev_masta: You might need to set the display to inline-block (or something other than inline).
• Darren Shewry: nice, but beware pointer-events browser support (i.e. < IE11) : caniuse.com/#search=pointer-events
• Sablefoste: For style, try changing pointer-events:none; to pointer-events:unset;. Then, the cursor can be changed to cursor:not-allowed;. This gives a better clue as to what is going on to the user. Seems to work in FF, Edge, Chrome, Opera and Brave as of today.
• soupdog: @Sablefoste That doesn't work for me in Chrome 60. The cursor is indeed not-allowed, but the link remains clickable.
• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

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 code. Here's how you'd do what you want using the jQuery library.

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

• ldiqual: Don't forget preventing default behaviors: function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;.
• nickf: @Idiqual, return false does that
• Justin: return false only works if the action is set using the href attribute
• Charlie Tupman: Also this version can be used to disable clicks whilst keeping other pointer events like :hover or :focus! Top answer!
• Alexandru Severin: Although this works in all browsers, it only disabled clicking on a link. Keep in mind many users are used to open links from the context menu or by using the middle mouse button.

Answer 4

CSS can't disable a link. It can inhibit pointer events like clicks, but clicks are not the only way to activate a link. Your options are:

• Don't include the href or onclick attributes in your <a> tag.
• Use document.querySelector et al to find the anchor elements you want to disable. Remove their href or onclick attributes so they no longer have link behavior that can be activated by any method.

• easeout: I didn't think of that! Or maybe the attribute didn't exist yet in 2010? In any case it's true that pointer-events: none can disable mouse events. However, it doesn't disable the underlying link. In a test I tried in Chrome 81, I can still activate such a link by tabbing to it and typing the return key.

Answer 5

Bootstrap Disabled Link

<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>

Bootstrap Disabled Button but it looks like link

<button type="button" class="btn btn-link">Link</button>

Answer 6

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

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

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

• SausageFingers: @nickf true, however, this is a neat solution and is better than relying on the poor default IE styling when set to disabled.
• Mike Gifford: I think it could be a bit more complicated than that. Here's a solution snook.ca/archives/javascript/clear_links_to_1

Answer 7

Apply the below class on HTML.

.avoid-clicks {
 pointer-events: none;
}

• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

Answer 8

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 targets an attribute that starts with a specific value. It allows you to discard websites and 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 targets 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 have been supported since Internet Explorer 7. And the :not() selector since Internet Explorer 9.

• ecasper: How do I disable a link using disabled selector? e.g. <a class="test" disabled href="3">test</a> a:disabled{ cursor:not-allowed; }
• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

Answer 9

I used:

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

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

I had to add:

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

• Masamoto Miyata: I think a[disabled]:active { pointer-events: none !important; } is better.
• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

Answer 10

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 11

One way you could do this with CSS, would be to set a CSS on a wrapping div that you set to disappear and something else takes its place.

For example:

<div class="disabled">
 <a class="toggleLink" href="wherever">blah</a>
 <span class="toggleLink">blah</span
</div>

With a CSS like

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

To actually turn off the a, you'll have to replace its click event or href, as described by others.

PS: Just to clarify, I'd consider this a fairly untidy solution, and for SEO it's not the best either, but I believe it's the best with purely CSS.

Answer 12

Try this:

<style>
 .btn-disable {
 display: inline-block;
 pointer-events: none;
 }
</style>

• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

Answer 13

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 it is a good CSS way which work in Internet Explorer 10 (and later) and all new browsers:

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

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

• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

Answer 14

A modern solution is to use the HTML inert attribute. Here's an example:

a[inert] {
 color: #666;
}

<a href="#a">Home</a>
<a href="#b" inert>About</a>
<a href="#c">Contact</a>

Tabbing through the links works as intended, skipping the disabled link.

Find more info about the inert property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

• Michael: Thank you very much for sharing this answer! This was clean and very easy to implement. This one should be sorted higher up on the page.

Answer 15

I searched the 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': '' });

It was checked on Firefox and Internet Explorer 11, and it worked.

• Bram Vanroy: You don't need jQuery for this, you can set this in CSS yourself.
• Peter Mortensen: Is JavaScript really required?
• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

Answer 16

You can use this CSS content:

a.button,button {
 display: inline-block;
 padding: 6px 15px;
 margin: 5px;
 line-height: 1.42857143;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 background-image: none;
 border: 1px solid rgba(0, 0, 0, 0);
 border-radius: 4px;
 -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
 -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
 box-shadow: inset 0 3px 20px 0 #cdcdcd;
}
a[disabled].button,button[disabled] {
 cursor: not-allowed;
 opacity: 0.4;
 pointer-events: none;
 -webkit-touch-callout: none;
}
a.button:active:not([disabled]),button:active:not([disabled]) {
 background-color: transparent !important;
 color: #2a2a2a !important;
 outline: 0;
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

• Peter Mortensen: An explanation would be in order. E.g., what is the idea/gist? Why does it need so much more CSS content than previous answers? Is all of it really necessary? If it is necessary, what is the reason?

Answer 17

body{
 font-family: 'Roboto', sans-serif;
 font-weight: 500;
}
a.disable{
 pointer-events: none;
 color: black;
 text-decoration: none;
}

<a href="https://example.com">Normal</a>
<a href="https://example.com" class="disable">Disable</a>

• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing space will still "click" the link

Answer 18

I combined multiple approaches to provide some more advanced disabled functionality. Here is a gist, and the code is below.

This provides for multiple levels of defense so that anchors marked as disable actually behave as such.

Using this approach, you get an anchor that you cannot:

• click
• tab to and hit return
• tabbing to it will move focus to the next focusable element
• it is aware if the anchor is subsequently enabled

1. Include this CSS content, as it is the first line of defense. This assumes the selector you use is 'a.disabled'.

   a.disabled {
    pointer-events: none;
    cursor: default;
   }
   

2. Next, instantiate this class such as (with optional selector):

    $ ->
    new AnchorDisabler()
   

   Here is the CoffeeScript class:

    class AnchorDisabler
    constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)
    isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false
    onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)
    focusables = $(':focusable')
    return unless focusables
    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))
    next.focus() if next
    onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)
    ev.preventDefault()
    return false
    onKeyup: (ev) =>
    # 13 is the JavaScript key code for Enter. We are only interested in disabling that, so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)
    ev.preventDefault()
    return false
   

• Mehdi Dehghani: Hello !!, answer is about CSS not JS or anything else!

Answer 19

You can also size another element so that it covers the links (using the right z-index): That will "eat" the clicks.

(We discovered this by accident because we had an issue with suddenly inactive links due to "responsive" design causing a H2 to cover them when the browser window was mobile-sized.)

• AndFisher: True, but not for keyboard navigation.

Answer 20

Demo here
Try this one

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

• Matt Byrne: Your fiddle doesn't work! The link is still active in Chrome.
• 2C-B: To fix this code, swap the first two parameters passed to on(): $('html').on('click','a.Link',function(event){ event.preventDefault(); })
• Mehdi Dehghani: Hello !!, answer is about CSS not JS or anything else!

Answer 21

Most of the answers on this page are wrong. You can not disable a link with css, period, at least as of November 2023.

You can make it so you can't click the link with the mouse but you can still tab to the link and press return and the link will be "clicked"

Example:

document.querySelectorAll('a').forEach(button => {
 button.addEventListener('click', (e) => console.log(e.target.textContent));
});

a {
 pointer-events: none;
}

<li><a href="#a">link A</a>
<li><a href="#b">link B</a>
<li><a href="#c">link C</a>

enter image description here

2 imperfect solutions

1. you could add tabIndex="-1" and then you can't tab to the link.

   Of course if you pre add it then you've disabled the link for keyboard users. If you add it at runtime then you aren't disabling the link via CSS

2. make a fake link element for each link, via CSS hide one or the other

document.querySelectorAll('a').forEach(button => {
 button.addEventListener('click', (e) => console.log(e.target.textContent));
});
const container = document.querySelector('#container');
document.querySelector('button').addEventListener('click', () => {
 container.classList.toggle('disable-links');
});

.disabled-link {
 text-decoration: underline;
 opacity: 25%;
}
.links .disabled-link {
 display: none;
}
.disable-links .disabled-link {
 display: initial;
}
.disable-links a {
 display: none;
}

<div id="container" class="links">
<li><a href="#a">link A</a><span class="disabled-link">link A</span>
<li><a href="#b">link B</a><span class="disabled-link">link B</span>
<li><a href="#c">link C</a><span class="disabled-link">link C</span>
</div>
<button type="button">enable/disable links</button>

Answer 22

You can try this also

<style>
.btn-disable {
 pointer-events: none !important;
 color: currentColor;
 cursor: not-allowed;
 opacity: 0.6;
 text-decoration: none; 
}
</style>

<html>
 <head>
 <title>NG</title>
 </head>
 <style>
 .btn-disable {
 pointer-events: none !important;
 color: currentColor;
 cursor: not-allowed;
 opacity: 0.6;
 text-decoration: none; 
 }
 </style>
 <body>
 <div class="btn-disable">
 <input type="button" value="Show">
 </div>
 </body>
</html>

Answer 23

It's possible to do it in CSS:

.disabled{
 cursor: default;
 pointer-events: none;
 text-decoration: none;
 color: black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

See at:

Please note that the text-decoration: none; and color: black; is not needed, but it makes the link look more like plain text.

• user128511: This doesn't work. pointer-events: none only prevents pointing devices from clicking the link . Pressing tab until the link has the focus and then pressing return will still "click" the link

Answer 24

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 25

There is no way to disable a a link using only CSS, nor it is possible with HTML.

The closest efficient way is to use JS href="javascript:void(0)" in the href attribute.

That is an old trick and is not perfect, because at mouse over, it does still display javascript:void(0) in the bottom left link tooltip in browsers.

Also, since using the middle click on a link in browsers does open a new tab, it would open a blank tab.

The best proper way is to not use the a tag at all, but instead mimic it using CSS text-decoration: underline and the :active selector, on another HTML element.

a, span { display: block; user-select: none }
.fakelink {
 text-decoration: underline;
 color: blue;
 cursor: pointer
}
.fakelink:active {
 color: red;
}

<span class="fakelink">Fake link using span</span>
<a style="pointer-events: none" href="https://stackoverflow.com">Disabled with CSS</a>
<a disabled href="https://stackoverflow.com">Disabled with disabled attribute</a>
<a inert href="https://stackoverflow.com">Disabled with inert attribute</a>
<a href="javascript:void(0)">Disabled with javascript:void(0)</a>

Answer 26

pointer-events:none will disable the link:

.disabled {
 pointer-events: none;
}

<a href="#" class="disabled">link</a>

• gztomas: This is good, but of course, not working if the users uses his keyboard :(

Answer 27

<a href="#!">1) Link With Non-directed url</a><br><br>
<a href="#!" disabled >2) Link With with disable url</a><br><br>

• Hexodus: The <a> tag doesn't have a disabled attribute.
• Irrfan23: attribute a does not have diisabled attribute

Answer 28

simply use your tab without a link, don't include any link attribute to it.