:focus-visible
The :focus-visible pseudo-class matches a focused element only when the browser determines a focus ring should be shown.
Syntax
selector:focus-visible { }Examples
button:focus { outline: none; }
button:focus-visible {
outline: 2px solid royalblue;
outline-offset: 2px;
}
Output
Shows the focus ring for keyboard navigation but not for mouse clicks on the button.
Notes
This is the modern, accessible way to style focus: keyboard users get a visible ring while pointer users do not see a distracting one. Always provide a clearly visible style; never leave focus invisible.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 86 |
| firefox | 85 |
| safari | 15.4 |
| edge | 86 |