Disable a href Link using CSS

How to Disable Links on the Current Page with Pure CSS

If you want to disable links on the current page, read this snippet and try it for yourself.

The idea is the following — don’t have links to the same page you are on. It is when you see a link, but it does nothing when clicked because it will bring you to the same page you are on.

You can disable a link using the CSS pointer-events property which specifies whether the element in the page has to respond or not while clicking on it.

Let’s see the following code that shows the use of pointer-events where the tag is disabled with the cursor property set to «default»:

Create HTML

h2>Disable link on current page h2> a href="https://www.w3docs.com/" class="disabled">Click Here a>

Add CSS

• Set the pointer-events to «none», so as the element will never react to pointer-events.
• Set the cursor to its «default» value to disable the anchor tag.

.disabled < pointer-events: none; cursor: pointer; >

Example of disabling a link on the current page:

html> html> head> title>Title of the document title> style> .disabled < pointer-events: none; cursor: default; > style> head> body> h2>Disable link on current page h2> a href="https://www.w3docs.com/" class="disabled">Click Here a> body> html>

As you see, though it looks like a link, nothing happens when we want to click on it.

In the following example, the text-decoration and color properties are applied to the tag so that it looks like a link is disabled.

Example of disabling a link on the current page using the text-decoration and color properties:

html> html> head> title>Title of the document title> style> .disabled < pointer-events: none; cursor: default; text-decoration: none; color: #000000; > style> head> body> h2>Disable link on current page h2> a href="https://www.w3docs.com/" class="disabled">Click Here a> body> html>

You can also disable a link on the current page setting the user-select property to «none».

Let’s see an example, which shows the difference between disabled and active links.

Example of disabling a link on the current page using the user-select property:

html> html> head> title>Title of the document title> style> a.button, button < display: inline-block; padding: 20px 55px; margin: 20px 10px; line-height: 18px; 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; border: 0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: #8ebf42; text-decoration: none; color: #ffffff; > 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: #cccccc; color: #2a2a2a; outline: 0; > style> head> body> h2>Disable link on current page h2> a href="https://www.w3docs.com/" disabled="disabled" class="button">Disabled a> a href="https://www.w3docs.com/" class="button">Click here a> body> html>

Источник

How to Disable Links

A disabled link is not a link, it’s just text. You need to rethink your design if it calls for disabling a link. Bootstrap has examples of applying the .disabled class to anchor tags, and I hate them for it. At least they mention that the class only provides a disabled style, but this is misleading. You need to do more than just make a link look disabled if you really want to disable it.

Surefire way: remove the href

If you have decided that you are going to ignore my warning and proceed with disabling a link, then removing the href attribute is the best way I know how. Straight from the official Hyperlink spec:

The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere.

/* * Use your preferred method of targeting a link * * document.getElementById('MyLink'); * document.querySelector('.link-class'); * document.querySelector('[href="https://unfetteredthoughts.net"]'); */ // "Disable" link by removing the href property link.href = ''; // Enable link by setting the href property link.href = 'https://unfetteredthoughts.net';

That’s not enough, I want something more complex so that I can look smarter!

If you just absolutely have to over-engineer some extreme solution, here are some things to consider. Hopefully, you will take heed and recognize that what I am about to show you is not worth the effort. First, we need to style our link so that it looks disabled.

Setting color to currentColor should reset the font color back to your normal, non-link text color. I am also setting the mouse cursor to not-allowed to display a nice indicator on hover that the normal action is not allowed. Already, we have left out non-mouse users that can’t hover, mainly touch and keyboard, so they won’t get this indication. Next the opacity is cut to half. According to WCAG, disabled elements do not need to meet color contrast guidelines. I think this is very risky since it’s basically plain text at this point, and dropping the opacity in half would make it very hard to read for users with low-vision, another reason I hate this. Lastly, the text decoration underline is removed as this is usually the best indicator something is a link. Now this looks like a disabled link! But it’s not really disabled! A user can still click/tap on this link. I hear you screaming about pointer-events .

Ok, we are done! Disabled link accomplished! Except, it’s only really disabled for mouse users clicking and touch users tapping. What about browsers that don’t support pointer-events ? According to caniuse, this is not supported for Opera Mini and IE pointer-events unless display is set to block or inline-block . Also, setting pointer-events to none overwrites our nice not-allowed cursor, so now mouse users will not get that additional visual indication that the link is disabled. This is already starting to fall apart. Now we have to change our markup and CSS…

Wrapping the link in a < span >and adding the isDisabled class gives us half of our disabled visual style. A nice side-affect here is that the disabled class is now generic and can be used on other elements, like buttons and form elements. The actual anchor tag now has the pointer-events and text-decoration set to none . What about keyboard users? Keyboard users will use the ENTER key to activate links. pointer-events are only for pointers, there is no keyboard-events. We also need to prevent activation for older browsers that don’t support pointer-events . Now we have to introduce some JavaScript.

// After using preferred method to target link link.addEventListener('click', function (event) < if (this.parentElement.classList.contains('isDisabled')) < event.preventDefault(); >>);

Now our link looks disabled and does not respond to activation via clicks, taps, and the ENTER key. But we are still not done! Screen reader users have no way of knowing that this link is disabled. We need to describe this link as being disabled. The disabled attribute is not valid on links, but we can use aria-disabled=»true» .

Now I am going to take this opportunity to style the link based on the aria-disabled attribute. I like using ARIA attributes as hooks for CSS because having improperly styled elements is an indicator that important accessibility is missing.

.isDisabled < cursor: not-allowed; opacity: 0.5; >a[aria-disabled="true"] < color: currentColor; display: inline-block; /* For IE11/ MS Edge bug */ pointer-events: none; text-decoration: none; >

Now our links look disabled, act disabled, and are described as disabled. Unfortunately, even though the link is described as disabled, some screen readers (JAWS) will still announce this as clickable. It does that for any element that has a click listener. This is because of developer tendency to make non-interactive elements like div and span as pseudo-interactive elements with a simple listener. Nothing we can do about that here. Everything we have done to remove any indication that this is a link is foiled by the assistive technology we were trying to fool, ironically because we have tried to fool it before. But what if we moved the listener to the body?

document.body.addEventListener('click', function (event) < // filter out clicks on any other elements if (event.target.nodeName == 'A' && event.target.getAttribute('aria-disabled') == 'true') < event.preventDefault(); >>);

Are we done? Well, not really. At some point we will need to enable these links so we need to add additional code that will toggle this state/behavior.

function disableLink(link) < // 1. Add isDisabled class to parent span link.parentElement.classList.add('isDisabled'); // 2. Store href so we can add it later link.setAttribute('data-href', link.href); // 3. Remove href link.href = ''; // 4. Set aria-disabled to 'true' link.setAttribute('aria-disabled', 'true'); >function enableLink(link) < // 1. Remove 'isDisabled' class from parent span link.parentElement.classList.remove('isDisabled'); // 2. Set href link.href = link.getAttribute('data-href'); // 3. Remove 'aria-disabled', better than setting to false link.removeAttribute('aria-disabled'); >

That’s it. We now have a disabled link that is visually, functionally, and semantically disabled for all users. It only took 10 lines of CSS, 15 lines of JavaScript (including 1 listener on the body), and 2 HTML elements. Seriously folks, just don’t do it.

Источник

How to disable a href link in CSS?

The href attribute specifies the URL of the page the link goes to and this attribute specifies the location (URL) of the external resource (most often a style sheet file).To disable a href link we need to use various attributes along with it.

Syntax

In HTML we use the following syntax to use href attribute.

In this, we can also use the tag instead of the tag.

Multiple Approaches

We have provided the solution in different approaches.

Let’s see the program along with its output one by one.

Approach-1: By Using pointer-events property

In this method, the href within a class is used to deactivate the link inside the a> tag, and the pointer-events CSS property is used to control whether or not the element on the page must respond when clicked.

A specific visual element’s ability to become the target of pointer events is controlled by the pointer-events CSS property, which specifies whether or not they can.

We have used the colour and text-decoration properties in addition to the pointer-events property.

It should be noted that pointer-events are an experimental use of CSS for non-SVG elements. Due to numerous unresolved concerns, the functionality was originally intended for the CSS 3 UI draught specification but has now been moved to CSS 4.

Syntax

The following is the generic syntax to pointer-events CSS property where in parameter it take property accordingly.

Example

The following program we are using internal CSS, creating class inside the style tag along with the pointer-event property set to none to make the href link disable when used within the tag by adding the same class to it to make the text added in the tag disable in HTML programming language.

     .disable-link Link   

Approach-2: By Using Bootstrap disabled link property

In this method, the href link attribute is used in conjunction with the pre-defined bootstrap properties from class disabled to make the supplied link disabled.

To attempt to deactivate the link functionality of a> and this class while making it visually appear disabled, the.disabled class utilises pointer-events: none.

Example

In this program, we have used the .disabled class which is the inbuilt class of bootstrap with the where we have used the href attribute with link to make the same link diable to any user in the HTML programming language.

Supported Browsers − The browsers supported by pointer-events Property are listed below −

• Google Chrome 1.0
• Edge 12.0
• Internet Explorer 11.0
• Firefox 1.5
• Opera 9.0
• Safari 4.0

In this article, we explored how to disable the href link in HTML using two different approaches.

Источник