DEV Community


Discussion on: Grab your user's attention with the :focus-within CSS selector

link2twenty profile image
Andrew Bone

Very cool, I'd make one slight change to prevent a repaint.

I'd move your :focus-within to form using box-shadow and remove the before.

form {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  background: white;
  padding: 16px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
  transition: box-shadow 0.1s ease;
form:focus-within {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
  transition-duration: 300ms;
Enter fullscreen mode Exit fullscreen mode

It also means things behind the shadow can still be interacted without having to wait for the shadow to fade away.

vtrpldn profile image
Vitor Paladini Author

Hey, Andrew. Great addition, thanks 😄

devaicom profile image

Thanks for the tip : allow to use this technique only on forms, without the problem that links (or other elements) can gain focus too.