'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

javascriptjquerycss


Solution 1:[1]

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

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

Solution 2:[2]

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>

Solution 3:[3]

Replace:

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

With

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ivan Chechko
Solution 3 Tobias S.

Related Questions