<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-lg-12 col-md-12 col-sm-12 col-xs-12 bg-black"> <div class="row"> <div class="col-lg-3 col-md-3 pull-right"> <div class=""> <div class="custom-search"> <input type="text" class="form-control" placeholder="search..."> </div> </div> </div> </div> </div> </div> </div>

.custom-search input { background: rgba(255, 255, 255, 1) url("https://image.flaticon.com/icons/svg/126/126474.svg") no-repeat scroll right center / 30px 18px; padding-right: 20px; transition: all 0.5s ease 0s; width: 30px; float:right; } .custom-search input:focus { width: 100%; } .bg-black { background: #999 none repeat scroll 0 0; display: inline-block; padding: 3% 2%; width: 100%; }