label to stay on top after input field is filled - html

Question

I want to keep my label to stay on top of the input field after we fill the input data in html
I have tried the valid function in css but couldn't achieve the functionality.
.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label {
position: absolute;
top: 65%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .3s;
}
.txt_field input:focus~label {
top: 0px;
color: #0170C1;
}
<div class="txt_field">
<i class="fa fa-user"></i>
<input type="text" class="textbox" id="username" placeholder="">
<label>PhoneNumber/Email</label>
</div>
I have tried .txt_field input:focus ~valid but the label keeps overlapping with the input data.
What can I do to make the label stay on top after the input field is filled.

Answer 1

Use the :placeholder-shown pseudo-class to detect does input is filled and use ::placeholder pseudo-elements selectors to hide unwanted placeholder.
Also you need position:relative; for the .txt_field for better view.
And it's better to use + except ~.
Important: Input tag must have a non-empty placeholder attribute.
.txt_field{
position:relative;
}
.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label {
position: absolute;
top: 65%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .3s;
}
.txt_field input:focus+label, .txt_field input:not(:placeholder-shown)+label {
top: 0px;
color: #0170C1;
}
.txt_field input::placeholder {
color: transparent;
}
<div class="txt_field">
<i class="fa fa-user"></i>
<input type="text" class="textbox" id="username" placeholder="if empty will not work">
<label>PhoneNumber/Email</label>
</div>

Answer 2

.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
background-color: rgba(0,0,0,.1);
}
.txt_field label {
position: absolute;
top: 65%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .3s;
}
.txt_field input:focus~label,
.txt_field input:not(:placeholder-shown)~label{
top: 0px;
color: #0170C1;
}
<div class="txt_field">
<i class="fa fa-user"></i>
<input type="text" class="textbox" id="username" placeholder="">
<label>PhoneNumber/Email</label>
</div>

Answer 3

Two important points:
1- you must learn about HTML structure and understand its importance.
2- you must learn about display and positioning element. learning this will help you to put elements properly where you want them.
don't use position: absolute; for this case. and why is your input 100% width? that's not proper.
.txt_field input {
display: flex;
flex-direction: column;
position: relative;
width: 300px;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
border: 1px solid red;
}
.txt_field label {
/* position: absolute; */
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .3s;
border: 1px solid orange;
}
.txt_field input:focus~label {
top: 0px;
color: #0170C1;
}
<div class="txt_field">
<i class="fa fa-user"></i>
<label>PhoneNumber/Email</label>
<input type="text" class="textbox" id="username" placeholder="">
</div>

Answer 4

You can do it with the translate effect like this:
.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
transform: translateY(-30px) translateX(10px) scale(0.75);
}
and of course you better give it a transition to make it cool
// transition: transform 200ms