How can I add a floating label to a input?

user_18543053 0
Viewed 304

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 class="form-float btn-add"> 
     <input type="text" class="inputText" placeholder="" >                             
     <label class="floating-label" >Button text</label>                        
</div>

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

css html
3 Answers

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 class="form-group">
  <input type="text" class="form-control" placeholder=" " >
  <label class="form-control-placeholder">Button text</label>
</div>

user_144829450

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 class="form-float btn-add"> 
     <input type="text" class="inputText" placeholder=" " >                             
     <label class="floating-label" >Button text</label>                        
</div>

user_143674160

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 class="form-float btn-add"> 
    <input type="text" placeholder="Button Label" >                             
    <label class="floating-label">Button Label</label>
</div>

user_93655960
Related