: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

Небольшой совет: Никогда не удаляйте CSS контуры

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

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

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

BCD tables only load in the browser

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

:focus-visible Экспериментальная возможность
:focus-within