Псевдокласс :focus

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

Фокус могут получить не все элементы, а только ссылки, кнопки, поля формы. Именно к ним в стилях и следует добавлять :focus, для остальных элементов это не даст видимого результата.

Чаще всего :focus работает в связке с <input> и задаёт стиль элемента при получении им фокуса. К примеру, чтобы изменить цвет фона для поля с паролем, надо добавить :focus к селектору [type="password"].

input[type="password"]:focus { background-color: #5fcbcd; }

Влад Мержевич

Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.