Справочник HTML & CSS

:focus-visible

Срабатывает у элемента в фокусе, когда браузер считает, что фокус нужно показать, — обычно после перехода с клавиатуры.

Синтаксис

selector:focus-visible { … }

Примеры

Оранжевый контур появляется после Tab, но не после щелчка мышью:

<style>
  button { padding: 8px 16px; }
  button:focus-visible { outline: 3px solid orange; outline-offset: 2px; }
</style>
 
<button>Click me</button>
<button>Then press Tab</button>

:focus-within — родитель элемента в фокусе:

<style>
  form { padding: 12px; border: 2px solid lightgray; }
  form:focus-within { border-color: seagreen; }
</style>
 
<form><input placeholder="Focus me"></form>

Примечания

Это рекомендуемый способ оформлять фокус кнопок и ссылок. У текстовых полей :focus-visible срабатывает и после щелчка мышью, потому что пользователь сейчас будет печатать.

См. также

:focus — Срабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
outline — Обводка вокруг элемента, которая не занимает места и не сдвигает соседей.

Вопросы и ответы по теме

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.

Спасибо, что читаете!