Перейти к содержанию

:focus-visible

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

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

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

Псевдоклассы

Синтаксис

1
2
3
:focus-visible {
  /*  */
}

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

Полифил

Псевдокласс :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-visible

См. также

Ссылки

Комментарии