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.

  <textarea placeholder="type something" 

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.

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