DEV Community

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

View post
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 •

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.