<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Float Label with animation</h1> <form> <div class="form-group float-label"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group float-label"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div>

.float-label .header-label{ position: absolute; pointer-events: none; top: -8px; left: 10px; background-color: #FFF; padding: 0px 5px; font-size: 11px; visibility: visible; opacity: 1; } .float-label label { -webkit-transition: top 0.5s, left 0.5s, font 0.5s; -moz-transition: top 0.5s, left 0.5s, font 0.5s; -o-transition: top 0.5s, left 0.5s, font 0.5s; -ms-transition: top 0.5s, left 0.5s, font 0.5s; position: absolute; left: 8px; font-size: 13.2px; top: 8px; visibility: hidden; opacity: 0; } .form-group.float-label{ margin-bottom: 20px; } .form-group{ position: relative; }

$("form .float-label input").each(function () { var placeholder = $(this).attr('placeholder'); console.log(placeholder) var label = $(this).parent().find("label").text(); if (placeholder === undefined || placeholder === "") { $(this).attr("placeholder", label); } }); //Ajoute ou supprime la class header-label $("form .float-label input").bind("input propertychange", function (e) { if ($(e.target).val() !== "") { $(e.target).parent().find("label").addClass("header-label"); } else { $(e.target).parent().find("label").removeClass("header-label"); } });