:focus

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

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

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

Синтаксис

Error: could not find syntax for this item

Пример

HTML

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

CSS

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
# selector-focus
Selectors Level 4
# focus-pseudo

Совместимость с браузерами

BCD tables only load in the browser

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