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

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

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

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

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

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

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 29 апреля цена 21 900 ₽22 900 ₽

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

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

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

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

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

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