:focus-visible
A pseudo-class that targets an element only when it is focused AND the browser determines focus should be visible (usually when using a keyboard, not a mouse).
Syntax
/* Usage Example */
button:focus-visible {
/* Elegant focus ring only for keyboard users */
outline: 2px solid #3b82f6;
outline-offset: 4px;
}:focus-visible Browser support
Widely available
Since
2022 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
86+
85+
15.4+
86+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more