How to make a "pop-up" placeholder?

Question

css

Good afternoon.
It is necessary to lay out the input so that when the focus is on, the placeholder smoothly floats up and becomes a "label" (and also decreases in size). Accordingly, with blur, if the field was filled, then the placeholder remains at the top; if the field remains empty, then the placeholder also smoothly falls to its rightful place.
I tried to do it on crutches using positioning, but I would still like to use some more intelligent and universal way, if it exists. Can't do without your help
Thank you

Answer 1

Realization of placeholders inside input'a?
See my answer there. Just on your topic.

Answer 2

Use only label, that's the standard and it automatically makes the form field more accessible.
Example: jsbin.com/vaqoxikika/1/edit?html,css,output

Answer 3

instead of a placeholder, use a span
, so you can do whatever you want with it.
And then, either with CSS selectors or scripts, you set the behavior of the span with focus and blur

Answer 4

Execution option: make not a placeholder, but a label lying behind a translucent field.
When focusing on the field, the animation you need occurs and vice versa.

Answer 5

Here is an example codepen.io/emilium/pen/qdEMvE