如果输入值中有内容，如何隐藏 label

Question

名

 #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>

如果输入值中有内容，如何隐藏 label

Answer 1

 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>

Answer 2

代替：

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

和

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

Answer 3

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

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