How to change text styles if text is entered in the input field?

Question

css

There is a simple code. When an input is clicked, its label changes position, moving up. It is necessary that after the text is entered in the input, its label remains in the same place, that is, at the top. And if the text was not entered, the label successfully descended back. Tried various pseudo-classes but didn't help. Maybe it's my hands from one place)
Here is the code:

<div>
<input type="text" id="name">
<label for="name">Your Name</label>
</div>

label {
  position: absolute;
  top: 2%;
  left: 3%;
}
input:focus + label {top: -1%;}

Answer 1

Only via JS
stackoverflow.com/questions/3617020/matching-an-em...

Answer 2

It is possible, but with a small crutch. Add required to input and add input:valid to css