Search Icon inside text box

Question

How to place search icon inside text box

 <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span>

working fiddle

Simply by making it `input type="search"`. Alternatively, quick fix = https://jsfiddle.net/6d463wo1/2/ — Abhitalks, Apr 24 '17 at 10:21
[Illustrated method](https://stackoverflow.com/a/54113697/712334) using a simple SVG graphic on a related question which saw a bit more traction. — vhs, May 02 '20 at 13:13

score 2 · Answer 1 · edited Apr 24 '17 at 11:57

Hope this code snippet will help you.

    <div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">    
      <div class="input-group">
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">
                         <span class="glyphicon glyphicon glyphicon-search"></span>
                    </button>
                </div>
      </div>
    </div>

score 1 · Answer 2 · answered Apr 24 '17 at 10:21

CSS:

input {
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
input:focus{
  outline: 0;
}
.input-placeholder{
  background-color: #eee;
  display: inline-block;
  padding: 10px;



}

HTML:

 <div class="input-placeholder">
    <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span>
 </div>

Here's the fiddle https://jsfiddle.net/6d463wo1/1/

score 1 · Answer 3 · answered Apr 24 '17 at 10:23

As per your code it looks like you are using Bootstrap, in bootstrap it provide another method like input-group. You can use following html code for this

<div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
    <div class="input-group">
        <input class="form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><div class="input-group-addon"><span class="fa fa-search form-control-feedback"></span></div>
    </div>
</div>

score 1 · Answer 4 · answered Apr 24 '17 at 10:24

1

There's a bootstrap way for this. Use the .input-group-addon class.

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search By RoleName" aria-describedby="basic-addon2">
  <span class="input-group-addon fa fa-search" id="basic-addon2"></span>
</div>

In order to place the button inline with the input field, add this css:

.input-group .fa-search{
  display: table-cell;
}

Please try it in the fiddle here

answered Apr 24 '17 at 10:24

Kristijan Iliev

4,901
10
28
47

for my code its displaying out side of text box only – user7397787 Apr 24 '17 at 10:42
if you follow the example I provided it should not. If you have different element nesting please update the question in order to be able to act upon it. – Kristijan Iliev Apr 24 '17 at 10:59

score 0 · Answer 5 · answered Apr 24 '17 at 10:21

0

You can use this if you want

 <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName &#128269;"/>

answered Apr 24 '17 at 10:21

Sagar Kodte

3,723
4
23
52

Aditya Parmar · Answer 6 · 2018-11-18T01:47:14.540

    <!DOCTYPE ht`enter code here`ml>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
   href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
    <style>

    * {
        box-sizing: border-box;
    }

    .club input[type=text] {
        padding: 10px;
        font-size: 17px;
        border: 1px solid black;
        border-right: 0px solid black;
        float: left;
        width: 90%;
    }

    .club button {
        float: left;
        width: 10%;
        padding: 10px;
        background:white;
        color: black;
        font-size: 17px;
        border: 1px solid grey;
        border-left: none;
        cursor: pointer;
    }

    </style>
    </head>
    <body>

    <div class="club">
      <input type="text" placeholder="Search.." name="search2">
      <button type="submit"><i class="fa fa-search"></i></button>
    <div>

    </body>
    </html>

code on fiddle

Search Icon inside text box

6 Answers6