Simple disable mode using only CSS

Photo by AVI on Unsplash

There is a simple way to add a visual disable state to an HTML element.

We just have to add the following CSS class to the parent HTML element we want to disable:

.disabled {
    cursor: initial;
    pointer-events: none;
    opacity: 0.5;
}

Caveats of this method: disabling the elements using CSS only does not disable the keyboard tab focusing. At the time of writing, there is no viable CSS only solution to disable the tab navigation. For this, a tabindex=”-1″ property should be used on the HTML element. To dynamically switch the tabindex we need to use JavaScript to find the element and change the value.