This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Can you completely disable HTML elements with CSS and HTML only?

We all know the very handy disabled attribute for disabling form elements. Disabled form elements can’t receive focus, and they usually look a bit grayed out (but this depends on the browser implementation, of course). Today I tried to disable HTML elements, not just form elements. I wanted to disable a complete section of a web page.

Making things look disabled is easy. Just set the opacity to something like .5 and you’re done. But this doesn’t prevent the elements inside this section from getting focus. You can still click on all links, you can still fill in all forms. I thought I needed some filthy javascript hack to solve this, but there appears to be a very easy CSS solution for exactly this issue: pointer-events: none disables all click-like interaction. So, this class would disable any element:

.is-disabled {
    opacity: .5;
    pointer-events: none;
}

Now you can’t interact with this element, or any children of this element, with a mouse, or on a touch device. But you can still tab to it with your keyboard. Mathias Bynens suggested to use the attribute tabindex=”-1” on the disabled element to completely disable it. But unfortunately, this doesn’t seem to work: while you can’t tab to the element itself, you can still tab to all tabbable elements inside it.

Nope Well, someday, maybe!

Alas, we are not allowed to use the disabled attributes on whatever element we want to. So we still need a dirty JavaScript hack to completely disable whole sections of a page. Unless you know something I don’t know.

UPDATE: David Håsäther pointed me in the direction of the inert attribute which is supposed to do exactly what I want. Unfortunately, it isn’t implemented in any browser yet.