Перейти к содержанию

:focus

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

Синтаксис

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

Значения

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

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

Описание и примеры

<input class="red-input" value="I'll be red when focused." /><br />
<input class="blue-input" value="I'll be blue when focused." />
.red-input:focus {
  background: yellow;
  color: red;
}

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