CSS :focus псевдо класс

Определение и использование

CSS :focus Псевдо классы используются для выбора и установки стиля элементов, которые получили фокус.

Пример

Пример 1

Выберите и установите стиль для поля ввода при фокусировке:

input:focus {
  background-color: yellow;
}

Попробуйте сами

Пример 2

Измените цвет фона и ширину при фокусировке поля ввода:

input:focus {
  background-color: yellow;
  width: 250px;
}

Попробуйте сами

CSS грамматика

:focus {
  css declarations;
}

Технические детали

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдо класс.

Соответствующие страницы

Учебное пособие：Дробные классы CSS