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

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

Осталось оживить декоративное выделение.

В исходном состоянии выделение отсутствует, поэтому сначала изменим его ширину на нулевую. Чтобы декоративное выделение появлялось, когда поле ввода получает фокус, используем CSS-правило с такими селекторами:

input:focus ~ .label-box::before,
input:valid ~ .label-box::after {
  ...
}

И в этом правиле зададим нужную ширину частей рамки.

Чтобы выделение появлялось и исчезало плавно, нужно для обоих его частей задать плавный переход в этом правиле:

.label-box::before,
.label-box::after {
  ...
}
Минимальный вид табов
  • index.html
HTML
HTML

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

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

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

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

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