Псевдокласс CSS :focus-visible

Определение и использование

CSS :focus-visible Псевдоклассы применяются только для фокуса через клавиатуру, а не через мышь.

Это можно использовать с :focus Используйте вместе, чтобы создать разные стили фокуса для клавиатурного и мышиного/fühлительного фокуса.

Пример

Выберите и установите стиль для кнопки, которую можно фокусировать с помощью клавиши Tab клавиатуры:

button:focus-visible {
  outline: 2px solid red;
}

Попробуйте сами

CSS грамматика

:focus-visible {
  css declarations;
}

Технические детали

Версия: CSS4

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдокласс.

Кروм Эдж Фаерфокс Сафари Опера
86 86 85 15.4 72

Связанные страницы

Урок:Дробы CSS

См. также:Дроб для :focus в CSS