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

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

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

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

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