:focus для полей формы
Сам :focus часто используется в качестве сигнала пользователю, что элемент готов к работе. Браузер Chrome, например, к полю формы, получившему фокус, добавляет цветную рамку (рис. 1).
Рис. 1. Поле с фокусом и без
Чтобы изменить вид полей формы и сделать их одинаковыми в разных браузерах зададим цвет рамки у поля для поиска, а при получении фокуса поменяем цвет на синий (пример 1).
Пример 1. Рамка при получении фокуса
Результат данного примера показан на рис. 2.
Рис. 2. Поле с синей рамкой
Chrome к полям формы при фокусе добавляет свойство outline, за счёт этого и получается цветной контур. Убираем его через значение none.
См. также
Автор и редакторы
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич