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

you can use this css:

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>

Answer 2

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

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

Answer 5

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

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

Answer 6

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 it's place.

E.g.:

<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 it's 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.