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

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 >
  <i ></i>
  <input type="text"  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.

CodePudding user response：

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 >
    <i ></i>
    <input type="text"  id="username" placeholder="if empty will not work">
    <label>PhoneNumber/Email</label>
</div>

CodePudding user response：

.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 >
  <i ></i>
  <input type="text"  id="username" placeholder="">
  <label>PhoneNumber/Email</label>
</div>

CodePudding user response：

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 >
    <i ></i>
    <label>PhoneNumber/Email</label>
    <input type="text"  id="username" placeholder="">
    
  </div>

CodePudding user response：

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