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

Editor's draft

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 86
  • Chrome for Android release 86
  • Android WebView release 86

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • In development
  • No signal
  • No signal
  • Positive

Owner

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.

Search tags

focus, css,

Last updated on 2020-11-19