Стандартные поля формы выглядят одинаково скучно во всех браузерах и никак не реагируют на действия пользователя. А ведь именно отклик интерфейса — подсветка активного поля, изменение кнопки при наведении, приглушённый вид недоступного элемента — делает форму понятной и приятной. Пользователь всегда видит, где он находится и что можно нажать. Этот отклик задаётся через псевдоклассы состояний.

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

Что уже умеем / что добавим

Вы собрали умную форму с правильными типами и атрибутами. Теперь придадим ей аккуратный вид и отклик. В сквозном проекте мы оформим поля формы обратной связи и добавим им состояния фокуса и наведения.

Что вы узнаете в рамках статьи

• Как стилизовать поля ввода и кнопки.
• Что такое псевдокласс и как он работает.
• Как подсвечивать активное поле через :focus.
• Как реагировать на наведение через :hover.
• Как оформлять недоступные элементы через :disabled.

Ключевые термины

• Псевдокласс — селектор, выбирающий элемент в определённом состоянии.
• :focus — состояние элемента, на котором стоит фокус (курсор).
• :hover — состояние элемента под курсором мыши.
• :disabled — состояние недоступного, отключённого элемента.
• transition — плавный переход между состояниями.

Базовая стилизация полей

Сначала придадим полям аккуратный вид: зададим отступы, рамку, скругление и размер шрифта. Стилизовать поля можно по тегу или по классу:

input,
textarea,
select {
  padding: 0.6rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

Поля получат внутренние отступы, тонкую серую рамку и скруглённые углы — они станут выглядеть опрятно и единообразно во всех браузерах. Это отправная точка: дальше добавим реакцию на действия пользователя. Обратите внимание, что мы задали шрифт полям явно — по умолчанию поля не наследуют шрифт страницы.

Что такое псевдокласс

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

Вы уже встречали псевдоклассы в первом курсе — например, :hover для ссылок. Теперь применим ту же идею к элементам формы. Именно псевдоклассы делают интерфейс «живым», реагирующим на пользователя.

Подсветка фокуса: :focus

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

input:focus,
textarea:focus {
  border-color: #1a3c8c;
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 60, 140, 0.2);
}

Активное поле получит синюю рамку и мягкое свечение вокруг — пользователь ясно видит, куда сейчас вводит. Важное предупреждение: если вы убираете стандартную обводку через outline: none, обязательно добавьте собственную заметную подсветку (как здесь — рамку и тень). Иначе люди, работающие с клавиатуры, потеряют из виду активное поле — это серьёзная проблема доступности.

Наведение и недоступность: :hover и :disabled

Псевдокласс :hover срабатывает, когда курсор наведён на элемент, — чаще всего его используют для кнопок:

.button:hover {
  background-color: #163175;
}

Кнопка чуть потемнеет под курсором, подсказывая, что на неё можно нажать. А псевдокласс :disabled оформляет отключённые элементы — те, что помечены атрибутом disabled и недоступны для действия:

.button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}

Недоступная кнопка станет серой, а курсор превратится в знак запрета — пользователь поймёт, что нажать нельзя. Чтобы переходы между состояниями были плавными, добавьте элементам transition:

.button {
  transition: background-color 0.2s;
}

Теперь смена цвета при наведении будет мягкой, а не резкой. Сочетание состояний и плавных переходов и создаёт ощущение качественного, отзывчивого интерфейса.

Применяем в проекте

Оформим форму обратной связи. Придадим полям аккуратный вид, добавим подсветку фокуса, а кнопке — реакцию на наведение с плавным переходом.

.contact input,
.contact textarea,
.contact select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.contact input:focus,
.contact textarea:focus {
  border-color: #1a3c8c;
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 60, 140, 0.2);
}

.button {
  background-color: #1a3c8c;
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #163175;
}

Обновите страницу и покликайте по полям: активное поле подсвечивается синей рамкой со свечением, кнопка темнеет под курсором с плавным переходом, а все поля выглядят опрятно и одинаково. Форма стала не только удобной, но и красивой, с приятным откликом на действия.

Частые ошибки

• outline: none без замены.
  Убрав стандартную обводку фокуса, обязательно добавьте свою заметную подсветку — иначе страдает доступность.
• Поля не наследуют шрифт.
  Задавайте font-size/font-family полям явно, иначе они выглядят инородно.
• Нет отклика на действия.
  Без :focus и :hover форма кажется неживой; добавляйте состояния.
• Резкие переходы.
  Без transition смена цвета выглядит грубо; добавьте плавность.

Итоги

Прекрасная работа — ваша форма ожила! Вы научились стилизовать поля, освежили понятие псевдокласса и применили состояния: :focus подсвечивает активное поле, :hover реагирует на наведение, :disabled показывает недоступность. И, что важно, вы усвоили правило доступности про заметный фокус. Ваша форма обратной связи теперь выглядит профессионально и приятно откликается на действия.

Отличный результат! В следующем уроке завершим тему форм валидацией средствами HTML и CSS — научимся показывать пользователю правильность заполнения через :valid, :invalid и :required.