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

:focus

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

Псевдоклассы

Синтаксис

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

Значения

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

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

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

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

1
2
3
4
5
6
7
8
9
.red-input:focus {
  background: yellow;
  color: red;
}

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

Комментарии