CSS Focus Styles with :focus-visible
Focus styles without annoying mouse users
:focus shows an outline on every click, which looks wrong for mouse users. :focus-visible shows it only when the browser expects keyboard focus.
button:focus { outline: 2px solid blue;}// Outline appears on mouse click. Often removed with outline: none.button:focus-visible { outline: 2px solid var(--focus-color);}focus visible Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
Keyboard only
Outline shows when focus comes from Tab, not from a mouse click. Matches user intent.
Accessible by default
You keep visible focus for keyboard users. No need to remove outline and hurt a11y.
Browser decides
Browsers use heuristics (keyboard vs pointer). One selector, correct behavior.
How it works
With :focus, the outline appears whenever the element gets focus, including after a mouse click. That looks odd and many sites removed it with outline: none, which hurts keyboard users.
:focus-visible only matches when the browser would normally show a focus ring, e.g. after Tab. Mouse users don't see it, keyboard users do. You get clear focus styles without the old tradeoff.