Focus Visible
Only show focus styles for keyboard events.
/* default styles, progressive enhancement */
:focus {
outline: 3px solid blue;
}
/* Hide focus styles if they're not needed, for example,
when an element receives focus via the mouse. */
:focus:not(:focus-visible) {
outline: 0;
}
/* Show focus styles on keyboard focus. */
:focus-visible {
outline: 3px solid blue;
}Preogressive
Focus Within
Selects a the form when one of its descendants is focused.
form:focus-within {
background: #ff8;
color: black;
}