CSS: Focus on textarea with a partially-transparent background overlay

If you have a partially-transparent overlay that fills the entire screen, and an element with a higher z-index, you can create a distraction-free editing experience.

The overlay could be any element. But we will create it with css's :after selector on an existing element. It will be a fixed-position element with a partially-transparent background:

.transparent_overlay:after { 
  content: '';
  position: fixed;
  top: 0;
  left: 0; 
  height: 100%;
  width: 100%;
  background: white;
  opacity: 0.50;
  z-index: 1;
}

Note the z-index. The element we want to focus on will need a higher z-index. And it will need to be positioned, too. We'll make it relative in this example.

.focus_element {
  position: relative;
  z-index: 2;
}

We can create a textarea that, when focused, gives its parent the overlay, and removes it when it loses focus.

<div>
  <textarea placeholder="type something" 
    class="focus_element"
    onfocus="this.parentNode.classList.add('transparent_overlay')"
    onblur="this.parentNode.classList.remove('transparent_overlay')">
</div>

Try it below:


Some other approaches don't work with textareas because they rely on putting the :after selector on the element itself, and input and textareas don't seem to be able to take them.

css
I've removed disqus comments
Instead, press this
to express thanks
So far, 0 people have pressed the octopus