:focus CSS

Псевдо-класс :focus применяется, когда элемент получает фокус, либо при выборе его пользователем при помощи клавиатуры, либо активацией его мышью (например, при вводе формы).

Наследуется:
Нет
Анимируется:
Нет
Спецификации:

Синтаксис

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

Значения

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

Примеры

HTML

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

CSS

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

.blue-input:focus {
  background: yellow;
  color: blue;
}