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”).
Spec | https://w3c.github.io/csswg-drafts/selectors-4/#the-focus-visible-pseudo |
---|---|
Status | W3C Working Draft |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
108 | |||||
107 | 107 | TP | |||
106 | 106 | 16.1 | |||
11 | 105 | 105 | 105 | 16.0 | 91 |
10 | 104 | 104 | 104 | 15.6 | 90 |
9 | 103 | 103 | 103 | 15.5 | 89 |
8 | 102 | 102 | 102 | 15.4 | 88 |
Show all | |||||
7 | 101 | 101 | 101 | 15.2-15.3 (3) | 87 |
6 | 100 | 100 | 100 | 15.1 (3) | 86 |
5.5 | 99 | 99 | 99 | 15 (3) | 85 |
98 | 98 | 98 | 14.1 | 84 | |
97 | 97 | 97 | 14 | 83 | |
96 | 96 | 96 | 13.1 | 82 | |
95 | 95 | 95 | 13 | 81 | |
94 | 94 | 94 | 12.1 | 80 | |
93 | 93 | 93 | 12 | 79 | |
92 | 92 | 92 | 11.1 | 78 | |
91 | 91 | 91 | 11 | 77 | |
90 | 90 | 90 | 10.1 | 76 | |
89 | 89 | 89 | 10 | 75 | |
88 | 88 | 88 | 9.1 | 74 | |
87 | 87 | 87 | 9 | 73 | |
86 | 86 | 86 | 8 | 72 | |
85 (2) | 85 | 85 (2) | 7.1 | 71 (2) | |
84 (2) | 84 (1,*) | 84 (2) | 7 | 70 (2) | |
83 (2) | 83 (1,*) | 83 (2) | 6.1 | 69 (2) | |
81 (2) | 82 (1,*) | 81 (2) | 6 | 68 (2) | |
80 (2) | 81 (1,*) | 80 (2) | 5.1 | 67 (2) | |
79 (2) | 80 (1,*) | 79 (2) | 5 | 66 (2) | |
18 | 79 (1,*) | 78 (2) | 4 | 65 | |
17 | 78 (1,*) | 77 (2) | 3.2 | 64 | |
16 | 77 (1,*) | 76 (2) | 3.1 | 63 | |
15 | 76 (1,*) | 75 (2) | 62 | ||
14 | 75 (1,*) | 74 (2) | 60 | ||
13 | 74 (1,*) | 73 (2) | 58 | ||
12 | 73 (1,*) | 72 (2) | 57 | ||
72 (1,*) | 71 (2) | 56 | |||
71 (1,*) | 70 (2) | 55 | |||
70 (1,*) | 69 (2) | 54 | |||
69 (1,*) | 68 (2) | 53 | |||
68 (1,*) | 67 (2) | 52 | |||
67 (1,*) | 66 | 51 | |||
66 (1,*) | 65 | 50 | |||
65 (1,*) | 64 | 49 | |||
64 (1,*) | 63 | 48 | |||
63 (1,*) | 62 | 47 | |||
62 (1,*) | 61 | 46 | |||
61 (1,*) | 60 | 45 | |||
60 (1,*) | 59 | 44 | |||
59 (1,*) | 58 | 43 | |||
58 (1,*) | 57 | 42 | |||
57 (1,*) | 56 | 41 | |||
56 (1,*) | 55 | 40 | |||
55 (1,*) | 54 | 39 | |||
54 (1,*) | 53 | 38 | |||
53 (1,*) | 52 | 37 | |||
52 (1,*) | 51 | 36 | |||
51 (1,*) | 50 | 35 | |||
50 (1,*) | 49 | 34 | |||
49 (1,*) | 48 | 33 | |||
48 (1,*) | 47 | 32 | |||
47 (1,*) | 46 | 31 | |||
46 (1,*) | 45 | 30 | |||
45 (1,*) | 44 | 29 | |||
44 (1,*) | 43 | 28 | |||
43 (1,*) | 42 | 27 | |||
42 (1,*) | 41 | 26 | |||
41 (1,*) | 40 | 25 | |||
40 (1,*) | 39 | 24 | |||
39 (1,*) | 38 | 23 | |||
38 (1,*) | 37 | 22 | |||
37 (1,*) | 36 | 21 | |||
36 (1,*) | 35 | 20 | |||
35 (1,*) | 34 | 19 | |||
34 (1,*) | 33 | 18 | |||
33 (1,*) | 32 | 17 | |||
32 (1,*) | 31 | 16 | |||
31 (1,*) | 30 | 15 | |||
30 (1,*) | 29 | 12.1 | |||
29 (1,*) | 28 | 12 | |||
28 (1,*) | 27 | 11.6 | |||
27 (1,*) | 26 | 11.5 | |||
26 (1,*) | 25 | 11.1 | |||
25 (1,*) | 24 | 11 | |||
24 (1,*) | 23 | 10.6 | |||
23 (1,*) | 22 | 10.5 | |||
22 (1,*) | 21 | 10.0-10.1 | |||
21 (1,*) | 20 | 9.5-9.6 | |||
20 (1,*) | 19 | 9 | |||
19 (1,*) | 18 | ||||
18 (1,*) | 17 | ||||
17 (1,*) | 16 | ||||
16 (1,*) | 15 | ||||
15 (1,*) | 14 | ||||
14 (1,*) | 13 | ||||
13 (1,*) | 12 | ||||
12 (1,*) | 11 | ||||
11 (1,*) | 10 | ||||
10 (1,*) | 9 | ||||
9 (1,*) | 8 | ||||
8 (1,*) | 7 | ||||
7 (1,*) | 6 | ||||
6 (1,*) | 5 | ||||
5 (1,*) | 4 | ||||
4 (1,*) | |||||
3.6 | |||||
3.5 | |||||
3 | |||||
2 |
Safari on iOS | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser | KaiOS Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|
16.1 | ||||||||||||
16.0 | all | 105 | 10 | 64 | 105 | 104 | 11 | 13.4 | 18.0 | 13.1 | 13.18 | 2.5 (1,*) |
15.6 | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 17.0 | |||||||
15.5 | 4.4 | 12 | 16.0 | |||||||||
15.4 | 4.2-4.3 | 11.5 | 15.0 | |||||||||
Show all | ||||||||||||
15.2-15.3 (3) | 4.1 | 11.1 | 14.0 | |||||||||
15.0-15.1 (3) | 4 | 11 | 13.0 | |||||||||
14.5-14.8 | 3 | 10 | 12.0 | |||||||||
14.0-14.4 | 2.3 | 11.1-11.2 | ||||||||||
13.4-13.7 | 2.2 | 10.1 | ||||||||||
13.3 | 2.1 | 9.2 | ||||||||||
13.2 | 8.2 | |||||||||||
13.0-13.1 | 7.2-7.4 | |||||||||||
12.2-12.5 | 6.2-6.4 | |||||||||||
12.0-12.1 | 5.0-5.4 | |||||||||||
11.3-11.4 | 4 | |||||||||||
11.0-11.2 | ||||||||||||
10.3 | ||||||||||||
10.0-10.2 | ||||||||||||
9.3 | ||||||||||||
9.0-9.2 | ||||||||||||
8.1-8.4 | ||||||||||||
8 | ||||||||||||
7.0-7.1 | ||||||||||||
6.0-6.1 | ||||||||||||
5.0-5.1 | ||||||||||||
4.2-4.3 | ||||||||||||
4.0-4.1 | ||||||||||||
3.2 |
Previously drafted as :focus-ring
As :-moz-focusring
Enabled through the "Experimental Web Platform features" flag in chrome://flags
Can be enabled via ":focus-visible pseudo-class" in the Experimental Features menu
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-focus-visible