:focus¶

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

Синтаксис¶

1
2
3
4

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

Значения¶

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

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

• HTML Living Standard
• Selectors Level 4
• Selectors Level 3
• CSS Level 2 (Revision 1)

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

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;
}

Комментарии