The :focus-visible pseudo-class makes it easier for developers to create focus styles that appropriately match the user's input modality. It is designed to help prevent a common anti-pattern where developers remove focus outlines for mouse users, and inadvertently make their sites inaccessible to keyboard users.
Specification
Specification being incubated in a Community Group
Status in Chromium
Enabled by default
(tracking bug)
Consensus & Standardization
After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.
- In development
- No signal
- Positive
Owner
Search tags
focus, css,Last updated on 2022-01-14
Comments
This pseudo-class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.) Note: Firefox currently ships a similar selector, :-moz-focusring, which the :focus-visible pseudo-class is based on.