Невидимый фокус после сброса стилей

17.03.2025 · CSS

Невидимый фокус после сброса стилей

Правило outline: none делает форму аккуратной на скриншоте, но скрывает положение клавиатурного фокуса. Верните явную обводку интерактивным элементам.

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid #165dcc;
  outline-offset: 3px;
}

Подберите цвет, различимый на фоне конкретного интерфейса. Не заменяйте обводку только сменой цвета текста: это бывает трудно заметить. Для более избирательного оформления можно использовать focus-visible, сохраняя совместимый запасной вариант. Пройдите всю страницу клавишей Tab и проверьте, не обрезает ли обводку overflow родителя.

Назад в блог

От идеи —
к первому шагу.

Расскажите, что хотите создать.
Обсудим задачу и наметим следующий шаг.