DEV Community

loading...

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

Collapse
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.

Collapse
vtrpldn profile image
Vitor Paladini Author

Hey, Andrew. Great addition, thanks 😄

Collapse
devaicom profile image
devAicom

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