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.
:focus-within
form
box-shadow
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; }
It also means things behind the shadow can still be interacted without having to wait for the shadow to fade away.
Hey, Andrew. Great addition, thanks 😄
Thanks for the tip : allow to use this technique only on forms, without the problem that links (or other elements) can gain focus too.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Very cool, I'd make one slight change to prevent a repaint.
I'd move your
:focus-within
toform
usingbox-shadow
and remove thebefore
.It also means things behind the shadow can still be interacted without having to wait for the shadow to fade away.
Hey, Andrew. Great addition, thanks 😄
Thanks for the tip : allow to use this technique only on forms, without the problem that links (or other elements) can gain focus too.