:focus-visible CSS pseudo-class

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class, and the UA determines via heuristics that the focus should be specially indicated on the element (typically via a “focus ring”).

Chrome

❌ 4 - 66: Not supported
❌ 67 - 85: Disabled by default
✅ 86 - 137: Supported
✅ 138: Supported
✅ 139 - 141: Supported

Edge

❌ 12 - 18: Not supported
❌ 79 - 85: Disabled by default
✅ 86 - 137: Supported
✅ 138: Supported

Safari

❌ 3.1 - 14.1: Not supported
❌ 15 - 15.3: Disabled by default
✅ 15.4 - 18.4: Supported
✅ 18.5: Supported
✅ 26.0 - TP: Supported

Firefox

❌ 2 - 3.6: Not supported
✅ 4 - 84: Supported
✅ 85 - 139: Supported
✅ 140: Supported
✅ 141 - 143: Supported

Opera

❌ 9 - 65: Not supported
❌ 66 - 71: Disabled by default
✅ 72 - 116: Supported
✅ 117: Supported

IE

❌ 5.5 - 10: Not supported
❌ 11: Not supported

Chrome for Android

✅ 138: Supported

Safari on iOS

❌ 3.2 - 14.8: Not supported
❌ 15 - 15.3: Disabled by default
✅ 15.4 - 18.4: Supported
✅ 18.5: Supported
✅ 26.0: Supported

Samsung Internet

❌ 4 - 13.0: Not supported
✅ 14.0 - 27: Supported
✅ 28: Supported

Opera Mini

❌ all: Not supported

Opera Mobile

❌ 10 - 12.1: Not supported
✅ 80: Supported

UC Browser for Android

❌ 15.5: Not supported

Android Browser

❌ 2.1 - 4.4.4: Not supported
✅ 138: Supported

Firefox for Android

✅ 140: Supported

QQ Browser

❌ 14.9: Not supported

Baidu Browser

✅ 13.52: Supported

KaiOS Browser

✅ 2.5: Supported
✅ 3: Supported

Previously drafted as :focus-ring

Resources:: Chrome does not support CSS Selectors 4 :focus-visible; WebKit bug #185859: [selectors] Support for Focus-Indicated Pseudo-class: `:focus-visible`; Bugzilla: Add :focus-visible (former :focus-ring); Bugzilla: implement :focus-visible pseudo-class (rename/alias :-moz-focusring); Mozilla Developer Network (MDN) documentation - :-moz-focusring; Prototype for `:focus-visible`; Blink: Intent to implement :focus-visible pseudo class.