Back to the catalog

Keyboard-only focus styling

Forms & Interactive Controls

:focus-visible

Baseline widely availablederived from web-features, captured 2026-09-06
  • Chrome86
  • Edge86
  • Firefox85
  • Safari15.4

Features it needs

The focus-visible polyfill watches whether the last interaction was a keyboard press or a pointer click, then toggles a class so a mouse click doesn't leave a focus ring behind. The CSS pseudo-class :focus-visible does that same judgment call natively: the browser decides whether focus came from something that benefits from a visible ring, no JavaScript class-toggling required.

When this applies

Showing a focus ring only for keyboard or other non-pointer focus, not for a mouse click.

The native approach

:focus-visible
button:focus {
  outline: none;
}
button:focus-visible {
  outline: 2px solid var(--accent);
}
Live example

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • You need to support Internet Explorer or a browser old enough to predate :focus-visible, which the polyfill's JS-based heuristic still covers.
  • You need the exact same heuristic across every browser version, including ones that shipped :focus-visible before the spec's behavior settled. Small heuristic differences existed early on.

Packages this covers

Minified and gzipped, captured 2026-09-06.