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.

Comments

  1. Not for any case (due to relative positioning), but solves the problem:

    .is-disabled {
    opacity: .5;
    position: relative;
    }
    .is-disabled::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    }

  2. Sorry, does not solve, keyboard access is still possible.

    • Vasilis
    • #

    Hi Mikhail, this does the same thing as pointer-events: none;, right? The difference, of course, is that your solution works on some older browsers that don’t support pointer-events.

    • Salman Abbas
    • #

    pointer-events is not supported by IE >.<