Move label in placeholder CSS

Question

I have this sample:

link

CODE HTML:

<div class="field">
    <label>First Name</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

CODE CSS:

.field{
  position: relative;
}

.label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}

input:focus ~ .label,
input:not(:focus):valid ~ .label {
  top: -6px;
}

Basically I want when the user writes something in the input, the label is moved over the input.

Can this be obtained only from the css?

Can you please change the example I created to understand exactly how this is done?

Thanks in advance!

Answer 1

Please try this modest code

.field{
  position: relative;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 1.2s ease all;
  font-size: 15px;
}
input:focus ~ label{
  top:-10px;
  font-size:12px;
  opacity: 1; 
	margin-left: 45px;  
	transition: all 1.5s ease-out; 
	-webkit-transform: rotate(720deg);   
	zoom: 1;
}

<div class="field">
	<input type="text" class="input-text">
  <label>First Name</label>
</div>

Answer 2

i hope this is what you need. but there is a problem when you unfocused input.

i just make little changes in HTML.

.field{
  position: relative;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}
input:focus ~ label{
  top:-10px;
  font-size:12px;
}

<div class="field">
	<input type="text" class="input-text">
  <label>First Name</label>
</div>