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

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

В предыдущих заданиях много раз использовался приём с :checked ~. В этом задании воспользуемся похожим приёмом для селекторов :focus и :valid, которые тоже разбираются в части «Селекторы. Тонкости».

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

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

Первый селектор срабатывает когда в поле находится курсор, а второй селектор когда поле заполнено верно. Это упрощённый пример, поэтому мы не учитываем все варианты, например, когда поле заполнено неверно.

Чтобы подпись смещалась красиво, добавим ей плавный переход.

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

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

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

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

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

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