CSS HTML

[ Solved -10 Answers ] CSS – HTML – Disable link using css

  • Is there any way to disable a link using CSS?
  • We have a class called current-page and want links with this class to be disabled so that no action occurs when they are clicked.

The solution is  here:

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

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

  • 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.
Css Code
$('a.current-page').click(function() { return false; }); 

This is one of the solution:

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

  • CSS can’t do that. CSS is for presentation only.

Your options are:

  • Don’t include the href attribute in your  tags.
  • Use JavaScript, to find the anchor elements with that class, and remove their href or onclick attributes accordingly.

Bootstrap Disabled Link

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

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

  • You can set href attribute to javascript:void(0)
Css Code
<style>
 .disabled
{ /*Disabled link style*/ color:black; } </style>
 <a class="disabled" href="javascript:void(0)">LINK</a>

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.

See also  [Solved-10 Answers] UTF-8 all the way through

CSS :

Css Code
button {
    padding: 0;
    border: 0;
    background-color: inherit;
    color: Blue;
    cursor: pointer;    
}

HTML :

Html Code
<button disabled>Hello World</button>

Basically to disable button click functionality, just add CSS style using jQuery like so:

Css Code
$("#myLink").css({ 'pointer-events': 'none' }); 

Then to enable it again do this

Css Code
$("#myLink").css({ 'pointer-events': '' }); 

This is one of the solution:

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

Html Code
<a onclick="return false" href="https://www.google.co.in/" />Google</a> 

Using return false in “onclick” event inside the anchor tag, you can disable click function without using CSS.

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment

X