<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-sm-7"> <form class="mar-15"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <div class="text-effect"> <span>First Name</span> <input type="text" class="form-control focus-text" /> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <div class="text-effect"> <span>Last Name</span> <input type="text" class="form-control focus-text" /> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <div class="text-effect"> <span>Email</span> <input type="email" class="form-control focus-text" /> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <div class="text-effect"> <span>Phone no</span> <input type="email" class="form-control focus-text" /> </div> </div> </div> <div class="col-sm-12"> <div class="form-group"> <div class="text-effect"> <span>Your Message</span> <input type="email" class="form-control focus-text" /> </div> </div> </div> </div> </form> </div> </div> </div>

.focus-t span { bottom: 36px !important;; color: #d74141; font-size: 15px; transition: all 0.3s ease 0s; z-index:1; } .focus-t input:focus{ border-color: #d74141; } .text-effect input { border:none; border-bottom:2px solid #073951 !important; border-radius: 0; position:absolute; bottom:0; border-style: none none solid; border-width: 0 0 2px; box-shadow: none; z-index:2; background-color:transparent; } .form-control:focus { border-bottom:2px solid #073951 !important; box-shadow: none; outline: 0 none; transition:0.6s; } .text-effect { position: relative; height:70px; } .text-effect span { bottom: 3px; position: absolute; z-index:1; }

$('.focus-text').focus(function(){ $(this).closest('div').addClass('focus-t'); }) $('.focus-text').blur(function(){ if($('.focus-text').length > 0 && $('.focus-text').val() != ''){ $(this).closest('div').addClass('focus-t'); } else{ $(this).closest('div').removeClass('focus-t'); } })