"Support glyph and fa icon inside input"
Bootstrap 3.1.0 Snippet by imjohnlouie

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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" style="margin-top: 5%"> <div class="col-md-5"> <div class="form-group"> <div class="icon-addon addon-lg"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="icon-addon addon-md"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="icon-addon addon-sm"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="icon-addon addon-lg"> <select class="form-control"> <option>Select Option</option> <option>Sample</option> <option>Sample</option> </select> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="icon-addon addon-md"> <select class="form-control"> <option>Select Option</option> <option>Sample</option> <option>Sample</option> </select> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="icon-addon addon-sm"> <select class="form-control"> <option>Select Option</option> <option>Sample</option> <option>Sample</option> </select> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="input-group input-group-lg"> <span class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></span> <div class="icon-addon addon-lg"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> <div class="form-group"> <div class="input-group input-group-md"> <span class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></span> <div class="icon-addon addon-md"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> <div class="form-group"> <div class="input-group input-group-sm"> <span class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></span> <div class="icon-addon addon-sm"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </div> </div>
.center-block { float: none; margin-left: auto; margin-right: auto; } .input-group .icon-addon .form-control { border-radius: 0; } .icon-addon { position: relative; color: #555; display: block; } .icon-addon:after, .icon-addon:before { display: table; content: " "; } .icon-addon:after { clear: both; } .icon-addon.addon-md .glyphicon, .icon-addon .glyphicon, .icon-addon.addon-md .fa, .icon-addon .fa { position: absolute; z-index: 2; left: 10px; font-size: 14px; width: 20px; margin-left: -2.5px; text-align: center; padding: 10px 0; top: 1px } .icon-addon.addon-lg .form-control { line-height: 1.33; height: 46px; font-size: 18px; padding: 10px 16px 10px 40px; } .icon-addon.addon-sm .form-control { height: 30px; padding: 5px 10px 5px 28px; font-size: 12px; line-height: 1.5; } .icon-addon.addon-lg .fa, .icon-addon.addon-lg .glyphicon { font-size: 18px; margin-left: 0; left: 11px; top: 4px; } .icon-addon.addon-md .form-control, .icon-addon .form-control { padding-left: 30px; float: left; font-weight: normal; } .icon-addon.addon-sm .fa, .icon-addon.addon-sm .glyphicon { margin-left: 0; font-size: 12px; left: 5px; top: -1px } .icon-addon .form-control:focus + .glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus + .fa, .icon-addon:hover .fa { color: #2580db; }

Related: See More


Questions / Comments:

the icon inside the select input is overlapped by text when using chrome in Mac OS. Could you please check it!

bitdealo () - 4 years ago - Reply 0


Strange for some reason it is ignoring body font-family completely and showing Times Roman, even though it is not in css!

ukmartyn () - 4 years ago - Reply 0


Try !important in your css!

Adrian () - 3 years ago - Reply 0


i am not able to select text inside the input using mouse ?

Vivek () - 4 years ago - Reply 0


Thanks ;-)

Behzad () - 5 years ago - Reply 0


welcome Behzad ;-)

John Louie Binas () - 5 years ago - Reply 0


Hi, I loved your hack.
Tell me, please, how you can make a script that he would ignore some columns in the table? Not looking for these columns. Thank you.

Denis () - 5 years ago - Reply 0


John Louie Binas () - 5 years ago - Reply 0