Skip to content
GreenSnippets

Accessible focus ring with :focus-visible

Show a clear focus outline for keyboard users without drawing it on mouse clicks.

CSS
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

Example / expected output

Output
/* Tab through the page: every interactive element shows a blue ring. */

How it works

Never remove outlines without replacing them. :focus-visible matches when the browser decides the user needs a focus indicator (typically keyboard navigation). The outline uses outline-offset so it does not overlap the element, and a contrasting color so it passes WCAG 2.2 focus appearance guidance.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets