:focus-visible
Styles focus indicator only when keyboard navigation is used. Hides focus ring for mouse users.
Quick example
button:focus-visible { outline: 3px solid #4A90E2; outline-offset: 2px; }Examples
Show focus ring only for keyboard navigation
button:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}
/* Shows outline for Tab key, hides for mouse click */Keyboard users see a visible focus indicator; mouse users only see it while tabbing through.
Style interactive elements for accessibility
input:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}Apply consistent focus styles to all interactive elements when navigated via keyboard.
Remove default browser outline, add custom
button {
outline: none; /* Remove default */
}
button:focus-visible {
outline: 2px solid currentColor;
}Replace the default gray outline with a styled indicator that matches your design.
:focus-visible Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2019.
Safe to use without fallbacks.
Common pitfalls
:focus matches all focus, including mouse clicks. :focus-visible only matches keyboard focus. Don't confuse them.
With :focus-visible alone, mouse users clicking a button won't see a focus indicator. That's intentional—mouse users can see what they're clicking. But consider adding :focus styling too if you want all users to see focus.
The browser decides whether to match :focus-visible based on how the user navigated (keyboard vs mouse). You can't override this. This is a feature, not a bug—it respects user intent.