<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="inner-addon right-addon enjoy-cssx"> <i class="glyphicon glyphicon-search "></i> <input type="text" placeholder="Search" class="form-control enjoy-css" /> </div>

.enjoy-css { width: 250px; height: 45px; cursor: pointer; margin: 0 auto; border: .5px solid rgb(232, 238, 241); border-radius: 28px; font: normal 14px/28px "Advent Pro", Helvetica, sans-serif; color: rgb(119, 126, 128); text-align: center; -o-text-overflow: clip; text-overflow: clip; letter-spacing: 1px; background: rgba(0,0,0,0); } /* enable absolute positioning */ .enjoy-cssx { width: 250px; height: 45px; border-radius: 28px; font: normal 14px/28px "Advent Pro", Helvetica, sans-serif; background: rgb(255, 255, 255); } .inner-addon { position: relative; } /* style icon */ .inner-addon .glyphicon { position: absolute; padding: 13px; pointer-events: none; } /* align icon */ .left-addon .glyphicon { left: 0px;} .right-addon .glyphicon { right: 0px;} /* add padding */ .left-addon input { padding-left: 30px; } .right-addon input { padding-right: 30px; }