CODEWITHSUNDEEP
javascriptjquerycss
Murad
Murad

Reputation: 167

How to hide label if something is in input value

First name 

#Start+ #DITBT {
  position: absolute;
  top:5px;
  right:1160px;
  left: 15px;-webkit-transform: translate3d(0px, 0px, 0px);
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;  }
#Start:focus + #DITBT {
 opacity:0;
}
<div class="input-field"> 
  <input type="text" name="firstname" id="Start" maxlength="30" class="pad" required /> 
  <label for="Start" id="DITBT">First name</label>
</div>

How to hide label if something is in input value

Upvotes: 0

Views: 2569

Answers (3)

Abdelrahman Wahdan
Abdelrahman Wahdan

Reputation: 2065

Replace:

#Start:focus + #DITBT {
 opacity:0;
}

With

#Start:focus + #DITBT {
 display:none;
}

Upvotes: 0

Ivan Chechko
Ivan Chechko

Reputation: 31

input::placeholder {
  opacity: 0;
}

input:not(:placeholder-shown) ~ label {
  display: none;
}
<div class="input-field"> 
  <input type="text" placeholder="placeholder" name="firstname" id="Start" maxlength="30" class="pad" required /> 
  <label for="Start" id="DITBT">First name</label>
</div>

Upvotes: 3

Sofiene Djebali
Sofiene Djebali

Reputation: 4508

$('input').on('input',function(){
   if($(this).val() != '') {
        $(this).parent().find('label').fadeOut();   
   } else {
       $(this).parent().find('label').fadeIn(); 
   }
});

http://jsfiddle.net/nwdrrnun/2/

Upvotes: 0

Related Questions