<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"> <form class="form-container"> <fieldset> <legend>Bottom Bordered Input Style</legend> <div class="form-group"> <div class="inner-addon left-addon"> <i class="glyphicon glyphicon-envelope" aria-hidden="true"></i> <input type="email" class="form-control" id="email" placeholder="Email"> </div> </div> <div class="form-group"> <div class="inner-addon left-addon"> <i class="glyphicon glyphicon-lock" aria-hidden="true"></i> <input type="password" class="form-control" id="pwd" placeholder="Password"> </div> </div> </fieldset> </form> </div> </div>

.form-container { margin: 50px auto; width: 30%; } legend { border: 0; } .form-control { width: 60%; border: 0; border-bottom: 1.5px solid rgb(204, 204, 204); border-radius: 0; box-shadow: none; transition: width 1s ease-in-out; } .form-control:focus { width: 100%; border: 0; border-bottom: 1.5px solid #5bc0de; box-shadow: none; } .form-control:focus > .inner-addon .glyphicon { color: #5bc0de; } /* Text-field icons */ .inner-addon { position: relative; } .inner-addon .glyphicon { position: absolute; padding: 10px; color: #aaa; pointer-events: none; } .left-addon .glyphicon { left: 0px;} .right-addon .glyphicon { right: 0px;} .left-addon input, .left-addon textarea { padding-left: 30px; } .right-addon input, .right-addon textarea { padding-right: 30px; }