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 link

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.



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.

Search tags

focus, css,

Last updated on 2022-01-14