: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

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

Спецификация Статус Комментарий
HTML Living Standard
Определение ':focus' в этой спецификации.
Живой стандарт Определяет HTML семантику
Selectors Level 4
Определение ':focus' в этой спецификации.
Рабочий черновик Без изменений
Selectors Level 3
Определение ':focus' в этой спецификации.
Рекомендация Без изменений
CSS Level 2 (Revision 1)
Определение ':focus' в этой спецификации.
Рекомендация Изначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:focusChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 8Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка

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