$('input').on('blur', function() { $self = $(this); if ($self.val()) { $self.css({'background-color':'#ffffff'}); }else{ $self.css({'background-color':'transparent'}); } });
<p class="input"> <input name="first-name" type="text" /> <label for="first-name">First Name</label> </p> <p class="input"> <input name="last-name" type="text" /> <label for="last-name">Last Name</label> </p> <p class="input"> <input name="username" type="text" /> <label for="username">Username</label> </p>
p.input { display: inline-block; position: relative; } input { margin: 20px 0 0 0; background-color: transparent; } input:focus + label { top: -2px; font-weight: bold; } label { display: block; position: absolute; top: 22px; left: 5px; z-index: -1; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }