:focus

CSS псевдокласс :focus применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши "tab" на клавиатуре.

/* Selects any <input> when focused */
input:focus {
  color: red;
}

Примечание: Этот псевдокласс применяется только тогда, когда в фокусе находится сам элемент. Используйте :focus-within, если вы хотите выбрать элемент, в котором находится сфокусированный элемент.

Синтаксис

:focus

Пример

HTML

<input class="red-input" value="Я буду красным, если на меня попадёт фокус">
<input class="lime-input" value="Я буду лаймовым при фокусе">

CSS

.red-input:focus {
  color: red;
}

.lime-input:focus {
  color: lime;
}

Результат

Проблемы доступности

Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). WCAG 2.1 SC 1.4.11 Non-Text Contrast (WCAG 2.1 SC 1.4.11 Нетекстовой контраст) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.

:focus { outline: none; }

Никогда не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования WCAG 2.1 SC 1.4.11 Non-Text Contrast

Спецификации

Specification
HTML Standard (HTML)
# selector-focus
Selectors Level 4 (Selectors 4)
# focus-pseudo

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

BCD tables only load in the browser

Смотрите также