Как сделать чтобы placeholder не исчезал, а перемещался вверх при заполнении поля?

Question

[Mef1]

Как сделать чтобы placeholder не исчезал, а перемещался вверх при заполнении поля?
До заполнения

После заполнения

Answer 1

[Ankhena]

Answer 2

[Алексей Лауд]

Это должен быть не placeholder, а какой-нибудь label, который при input:focus будет перемещаться.

Что-то вроде такого:

input + label {
    // Стили для label при фокусе
}
input:focus + label {
    // Стили для label при фокусе
}

<div>
    <input />
    <label />
</div>

Answer 3

[Robur]

Убрать нативный атрибут "placeholder" и сделать его руками - отдельной разметкой, стилями и логикой. В любом виде как вам нравится, хоть с анимацией. Это есть во многих UI библиотеках начать можно с того чтобы найти тот что нравится и посмотреть как сделано там.