.action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }Толстый отступающий контур остаётся заметным вокруг кнопки.
УРОК 83 ИЗ 100
Создайте заметный индикатор фокуса
Чётко покажите фокус клавиатуры, не удаляя индикатор.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
:focus-visible выбирает сфокусированный элемент, когда браузер считает визуальный индикатор полезным. outline не занимает место в макете, а outline-offset отделяет его от края элемента.
.action:focus { outline: none; }Удаление outline без замены может лишить пользователей клавиатуры возможности видеть фокус.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Для .action:focus-visible задайте outline: 3px solid #f59e0b и outline-offset: 3px.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Фокус имеет сплошной outline 3px.
- ○Outline отстоит на 3px.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
Селектор следует фокусу, указанному браузером, а два свойства создают постоянный читаемый контур.