Стили фокусировки, доступные только для клавиатуры, в современных браузерах

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

Пользовательский стиль фокуса с помощью :focus-visible

Чтобы реализовать пользовательские стили фокуса с сохранением совместимости со старыми браузерами, используйте следующий подход:

button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}

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

Оригинальное решение для старых браузеров

Для браузеров, которые не поддерживают :focus-visible, альтернативный подход предполагает использование дополнительного элемента внутри каждого фокусируемого элемента, как предложено в статье Романа Комарова:

/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}

При размещении стилей фокуса на внутреннем элементе и удалении контуров по умолчанию как на родительском, так и на внутренних элементах после добавления пользовательского стиля фокуса, стили фокуса применяются только при взаимодействии с клавиатурой к основному видимому элементу.