utilities

CSS Focus-Visible Outline

Show keyboard focus rings only for keyboard users — not mouse users — using :focus-visible.

The :focus-visible pseudo-class solves the long-standing UX tension between removing distracting focus rings for mouse users and keeping them essential for keyboard users. The browser applies :focus-visible only when it determines focus was received through keyboard navigation or a similar mechanism, not on mouse click.

Live CSS Editor

CSS

Preview

/* Modern focus-visible pattern */

/* Remove default outline for all focus (both mouse and keyboard) */
*:focus {
  outline: none;
}

/* Restore outline ONLY for keyboard navigation */
*:focus-visible {
  outline: 2px solid #1d9e75;
  outline-offset: 3px;
  border-radius: 3px;
}

/* High-contrast alternative (better for dark backgrounds) */
*:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Custom per-element styles */
.button:focus-visible {
  outline: 2px solid #1d9e75;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.2);
}

.link:focus-visible {
  outline: 2px solid #1d9e75;
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: underline;
}

/* Input focus (always show — users need it for form fields) */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #1d9e75;
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15);
}

/* Windows High Contrast mode support */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 3px solid ButtonText;
  }
}

Edit CSS → see live previewTab = 2 spaces

Usage Note

Always apply :focus-visible styles — never remove them completely. They are essential for keyboard users, users of switch access devices, and users navigating with the Tab key. For form inputs, use :focus instead (users expect always-visible focus on inputs they are typing into).