How to disable a class in css

Question

Topic: HTML / CSSPrev|Next

Table of Contents Show

Answer: Use the CSS pointer-events Property
Related FAQ
Disable HTML anchor with CSS pointer-events: none
Disable HTML anchor with inline JavaScript href="javascript:void(0)"
Get The Jest Handbook (100 pages)
Get The Jest Handbook (100 pages)
How do you inactive a class in CSS?
How do I disable something in CSS?
How do you remove a class?
How do I remove all CSS from a class?

Answer: Use the CSS pointer-events Property

You can simply use the CSS pointer-events property to disable a link. The none value of this property specify the element is never the target of pointer events.

Let's try out the following example to understand how it actually works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable an HTML Link using CSS</title>
<style>
    .disabled-link{
        cursor: default;
        pointer-events: none;        
        text-decoration: none;
        color: grey;
    }
</style>
</head>
<body>
    <a href="somepage.html" class="disabled-link">HTML Link</a>
</body>
</html>

The pointer-events property supported in all major browsers, such as Chrome, Firefox, Safari, IE11+, etc. Alternatively, you can use jQuery to remove the clickable behavior from a disabled link.

Here are some more FAQ related to this topic:

How to remove dotted line around the links using CSS
How to disable spell checking in HTML forms
How to create custom cursor using CSS

Here are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript.

Table of Contents

Disable HTML anchor with CSS pointer-events: none
Disable HTML anchor with inline JavaScript href="javascript:void(0)"

Disable HTML anchor with CSS pointer-events: none

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style.

pointer-events: none will disable all click events on the anchor element.

For example:

<a href="https://google.com" style="pointer-events: none">Google.com</a>

The pointer-events can be set using CSS properties and selectors:

<style>
.disabled-link {
  pointer-events: none;
}
</style>
<a href="https://google.com" class="disabled-link">Google.com</a>

This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.

<style>
/* not recommended */
a {
  pointer-events: none;
}
</style>
<a href="https://google.com">Google.com</a>

We’ve now seen how to disable an HTML anchor/link element (a tag) using pointer-events: none, which can be done without touch the existing href attribute using styles.

Next we’ll see how to disable an HTML anchor/link element using inline JavaScript inside of the href attribute.

Disable HTML anchor with inline JavaScript href="javascript:void(0)"

The following link is disabled using inline JavaScript in the href attribute.

<a href="javascript:void(0)">Google.com</a>

This can be useful when combined with a JavaScript library like Alpine.js:

<div x-data="{ disabled: false }">
  <a :href="disabled ? 'javascript:void(0)': 'https://google.com'">Google.com</a>
  <button @click="disabled = !disabled">toggle disabled</button>
</div>

The examples in this post can be found on CodePen.

Photo by Jonathon Young on Unsplash

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.

Find out more

or

Join 1000s of developers learning about Enterprise-grade Node.js & JavaScript

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.

How do you inactive a class in CSS?

5 Answers.

Either you have to remove the class A from your source code..

Or you remove the class from the DOM by means of JavaScript..

Or you must overwrite your CSS in class B that any value that was set in class A gets initial/neutral values (sometimes it's the value 'initial', sometimes its the value 'auto' or 'none').

How do I disable something in CSS?

You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

How do you remove a class?

Delete a class.

Go to classroom.google.com and click Sign In. Sign in with your Google Account. ... .

At the top, click Menu ..

Scroll down and click Archived classes. Note: If you haven't archived any classes, this option won't be in the menu..

On the class card, click More. Delete..

Click Delete to confirm..

How do I remove all CSS from a class?

To remove all CSS classes of an element, we use removeClass() method. The removeClass() method is used to remove one or more class names from the selected element.

kode css Remove class JavaScript Disable click CSS Cara disable div