:focus-visible¶

Псевдокласс :focus-visible применяется, в то время как элемент соответствует псевдоклассу :focus, и UA определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.

Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).

Обратите внимание, что Firefox поддерживает аналогичную функциональность через старый псевдокласс с префиксом :-moz-focusring.

Синтаксис¶

1
2
3

:focus-visible {
  /*  */
}

Спецификации¶

• Selectors Level 4

Полифил¶

Псевдокласс :focus-visible можно эмулировать с помощью focus-visible.js.

Пример¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

1
2
3
4
5
6

<input value="Default styles" /><br />
<button>Default styles</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>

См. также¶

• :focus
• :focus-within

Ссылки¶

• Псевдо-класс :focus-visible ^{MDN (рус.)}

Комментарии