Input field animation problem after filling the details - html

Question

Hey everyone hope you all doing great, I am looking for some help with css part for my reactjs application input fields. Can someone solve it for me.
My Problem is that I want to make an animated input field in a way that the placeholder will indicate the input details, so on focusing to the input field the placeholder will move to the top of input field and I will be able to fill the details. But after focusing the pointer outside the input field after filling the details the placeholder gets overlapped. How can I solve the problem of removing it from overlapping.
Here are the images for reference
This is App.js:
<input className='input_field' type="number" name="number" placeholder=''
autoComplete='off'
value={formValues.number}
onChange={handleChange}
style={{width:"180px",height:"35px"}}
/>
<label className='input_label'>Mobile Number</label>
This is the corresponding App.css:
.input_field{
width: 100%;
height: 40px;
border: none;
border-bottom: 2px solid black;
outline: none;
font-size: 16px;
}
.input_label{
position: absolute;
left: 605px;
top: 296px;
pointer-events: none;
font-size: 16px;
}
.input_field:focus{
border-color: crimson;
}
.input_field:focus + .input_label{
top: 275px;
transition: 0.3s;
color: crimson;
}
I have tried adding this
.input_field:valid + .input_label
along with
.input_field:focus + .input_label{
top: 275px;
transition: 0.3s;
color: crimson;
}
but nothing is changed
Can someone please help me solving the problem I faced?

Answer 1

.input_field{
width: 100%;
height: 40px;
border: none;
border-bottom: 2px solid black;
outline: none;
font-size: 16px;
}
.input_label{
position: absolute;
left: 20px;
top: 20px;
pointer-events: none;
font-size: 16px;
}
.input_field:focus{
border-color: crimson;
}
.input_field::placeholder {
color: #fff;
opacity: 1; /* Firefox */
}
.input_field:-ms-input-placeholder {
color: #fff;
}
.input_field::-ms-input-placeholder {
color: #fff;
}
.input_field:not(:placeholder-shown) ~ label {
top: 275px;
transition: 0.3s;
color: crimson;
}
<input className='input_field' type="number" name="number" placeholder='enter number'
autoComplete='off'
value={formValues.number}
onChange={handleChange}
style={{width:"180px",height:"35px"}}
/>
<label className='input_label'>Mobile Number</label>
//You have to add placeholder text and try below css