Reputation: 17516
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.
Upvotes: 949
Views: 1445851
Reputation: 21282
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
Upvotes: 1
Reputation:
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>
2 imperfect solutions
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
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>
Upvotes: 0
Reputation: 8734
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:
href
or onclick
attributes in your <a>
tag.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.Upvotes: 36
Reputation: 174
simply use your tab without a link, don't include any link attribute to it.
Upvotes: -3
Reputation: 763
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>
Upvotes: 3
Reputation: 1727
Apply the below class on HTML.
.avoid-clicks {
pointer-events: none;
}
Upvotes: 14
Reputation: 170
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;
}
Upvotes: 0
Reputation: 325
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;
}
Upvotes: 13
Reputation:
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.
Upvotes: 0
Reputation: 441
pointer-events:none
will disable the link:
.disabled {
pointer-events: none;
}
<a href="#" class="disabled">link</a>
Upvotes: -1
Reputation: 7425
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:
=
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;
}
*=
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;
}
^=
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;
}
$=
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;
}
CSS can target any HTML attribute. Could be rel
, target
, data-custom
and so on...
<a href="#" target="_blank">Blank link</a>
[target=_blank]{
pointer-events: none;
}
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;
}
Attributes selectors have been supported since Internet Explorer 7. And the :not()
selector since Internet Explorer 9.
Upvotes: 13
Reputation: 104870
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>
Upvotes: 5
Reputation: 999
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>
Upvotes: 3
Reputation: 5554
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.
Upvotes: 4
Reputation: 3752
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:
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;
}
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
Upvotes: 2
Reputation: 1312
Try this:
<style>
.btn-disable {
display: inline-block;
pointer-events: none;
}
</style>
Upvotes: 7
Reputation: 17516
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.
Upvotes: 1457
Reputation: 7034
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.
Upvotes: 10
Reputation: 546393
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; });
Upvotes: 124
Reputation: 30563
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>
Upvotes: 24
Reputation: 1127
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>
Upvotes: 0
Reputation: 555
<a href="#!">1) Link With Non-directed url</a><br><br>
<a href="#!" disabled >2) Link With with disable url</a><br><br>
Upvotes: -2
Reputation: 4680
<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>
Upvotes: 31
Reputation: 2644
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
<a href="#" class="disabled">link</a>
Upvotes: 162
Reputation: 6219
Demo here
Try this one
$('html').on('click', 'a.Link', function(event){
event.preventDefault();
});
Upvotes: 1
Reputation: 54
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.)
Upvotes: 1
Reputation: 7492
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/
Upvotes: 10