Edit in JSFiddle

$('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;
}