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.
2 outline: 2px solid var(--focus-color);
3}
2 outline: 2px solid blue;
3}
// Outline appears on mouse click. Often removed with outline: none.
Browser Support for :focus-visible
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Your first month is free
Managed WordPress hosting for faster sites.
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.