Try this:
<style>
.btn-disable {
display:inline-block;
pointer-events: none;
}
</style>
You can set href
attribute to javascript:void(0)
.disabled {_x000D_
/* Disabled link style */_x000D_
color: black;_x000D_
}
_x000D_
<a class="disabled" href="javascript:void(0)">LINK</a>
_x000D_
<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>
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;
}
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 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;
}
$=
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;
}
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 are supported since IE7. :not()
selector since IE9.
.disabled {_x000D_
pointer-events: none;_x000D_
cursor: default;_x000D_
opacity: 0.6;_x000D_
}
_x000D_
<a href="#" class="disabled">link</a>
_x000D_
Thanks to everyone that posted solutions, 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, 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 coffescript 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 js 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
Demo here
Try this one
$('html').on('click', 'a.Link', function(event){
event.preventDefault();
});
CSS can't do that. CSS is for presentation only. Your options are:
href
attribute in your <a>
tags.class
, and remove their href
or onclick
attributes accordingly. jQuery would help you with that (NickF showed how to do something similar but better).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 {_x000D_
pointer-events: none;_x000D_
color: grey;_x000D_
}
_x000D_
<a href="#" class="current-page">This link is disabled</a>
_x000D_
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.
pointer-events:none
will disable the link:
.disabled {
pointer-events:none;
}
<a href="#" class="disabled">link</a>
It's possible to do it in CSS
.disabled{_x000D_
cursor:default;_x000D_
pointer-events:none;_x000D_
text-decoration:none;_x000D_
color:black;_x000D_
}
_x000D_
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>
_x000D_
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.
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; });
<a href="#!">1) Link With Non-directed url</a><br><br>_x000D_
_x000D_
<a href="#!" disabled >2) Link With with disable url</a><br><br>
_x000D_
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.)
you can use this css:
a.button,button {_x000D_
display: inline-block;_x000D_
padding: 6px 15px;_x000D_
margin: 5px;_x000D_
line-height: 1.42857143;_x000D_
text-align: center;_x000D_
white-space: nowrap;_x000D_
vertical-align: middle;_x000D_
-ms-touch-action: manipulation;_x000D_
touch-action: manipulation;_x000D_
cursor: pointer;_x000D_
-webkit-user-select: none;_x000D_
-moz-user-select: none;_x000D_
-ms-user-select: none;_x000D_
user-select: none;_x000D_
background-image: none;_x000D_
border: 1px solid rgba(0, 0, 0, 0);_x000D_
border-radius: 4px;_x000D_
-moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;_x000D_
-webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;_x000D_
box-shadow: inset 0 3px 20px 0 #cdcdcd;_x000D_
}_x000D_
_x000D_
a[disabled].button,button[disabled] {_x000D_
cursor: not-allowed;_x000D_
opacity: 0.4;_x000D_
pointer-events: none;_x000D_
-webkit-touch-callout: none;_x000D_
}_x000D_
_x000D_
a.button:active:not([disabled]),button:active:not([disabled]) {_x000D_
background-color: transparent !important;_x000D_
color: #2a2a2a !important;_x000D_
outline: 0;_x000D_
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);_x000D_
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);_x000D_
}
_x000D_
<button disabled="disabled">disabled!</button>_x000D_
<button>click me!</button>_x000D_
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>_x000D_
<a href="http://royansoft.com" class="button">test2</a>
_x000D_
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.
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;
}
Apply below class on html.
.avoid-clicks {
pointer-events: none;
}
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.
Source: Stackoverflow.com