How can I add a floating label to a input?-CodePudding

I want that when a user comes and tries to type text in "input" the label goes up, and if they leave that area blank it comes back to the original position. If user typed something over there it will stay up there.

I tried this code with input box with required it is working fine, but when I try to do this with input and add some content in input the label coming back down it need to be stay up there.

div{
  margin-top:40px;
}
.btn-add input[type="text"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.btn-add input:focus ~ .floating-label{
    top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);   
}
.floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 120%;
}
.form-float{
    position: relative;
}

<div > 
     <input type="text"  placeholder="" >                             
     <label  >Button text</label>                        
</div>

I remove input:not(:focus):valid~.floating-label so it can work with not required field

CodePudding user response：

Try this code since because of placeholder happening.

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

input   .form-control-placeholder {
  position: absolute;
  transition: all 200ms;
  top: -20px;
    bottom: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);
}

input:placeholder-shown   .form-control-placeholder {
      position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 120%;
}

.form-control:focus   .form-control-placeholder {
  position: absolute;
  transition: all 200ms;
    top: -20px;
    bottom: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);
}
input[type="text"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
label{
    position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 120%;
}

<br>
<br>
<div >
  <input type="text"  placeholder=" " >
  <label >Button text</label>
</div>

CodePudding user response：

Add Space to you placeholder by default and after that use input:not(:placeholder-shown) property to check if input is empty or not. Here working example of your code

div{
  margin-top:40px;
}
.btn-add input[type="text"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.btn-add input:focus ~ .floating-label{
    top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);   
}
.btn-add input:not(:placeholder-shown) ~ .floating-label{
  top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6); 
}

.floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 120%;
}
.form-float{
    position: relative;
}

<div > 
     <input type="text"  placeholder=" " >                             
     <label  >Button text</label>                        
</div>

CodePudding user response：

Since :placeholder-shown only works with placeholder text shown (no empty string) you could use visibility.

div {
    margin-top:40px;
}
.btn-add input[type="text"] {
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top: -20px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 120%;
}
.form-float input:placeholder-shown ~ label {
    top: 0;
    visibility: hidden;
}

.form-float {
    position: relative;
}

<div > 
    <input type="text" placeholder="Button Label" >                             
    <label >Button Label</label>
</div>