• Теория
  • Теория

Текстовое поле ввода, шаг 3

Теперь, когда плейсхолдер готов, сделаем декоративное выделение сфокусированного поля ввода с помощью псевдоэлементов у .label-box.

Это выделение будет выглядеть, как дополнительная нижняя рамка у поля ввода. Рамка будет появляться из центра поля, когда в нём появляется курсор, и исчезать при потере полем фокуса.

Создадим декоративную рамку из двух кусочков. Используем .label-box::before и .label-box::after для каждой части.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Плавные переходы» тренажёра «Интерфейсные анимации» можно после регистрации и оформления подписки.