Put search icon near textbox using bootstrap

Question

I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.

My code is like this:

<div class="container">
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="control-label">Name</label>
            <input id="txtName" class="form-control input-sm" />
            <span class="glyphicon glyphicon-search"></span> 
        </div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>

I don't want to use input group.

Please suggest an alternate way or alternate html with css.

Solution 1

Here are three different ways to do it:

Here's a working Demo in Fiddle Of All Three

Validation:

You can use native bootstrap validation states (No Custom CSS!):

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box

Input Group:

You can use the .input-group class like this:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box

Unstyled Input Group:

You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.

Use a normal input group but add the class input-group-unstyled:

<div class="input-group input-group-unstyled">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Then change the styling with the following css:

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

---

Also, these solutions work for any input size

Solution 2

Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.

.input { width: 90%; }
.input-icon {
    display: inline-block;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
}

EDIT Per dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css

Solution 3

<input type="text" name="whatever" id="funkystyling" />

Here's the CSS for the image on the left:

#funkystyling {
    background: white url(/path/to/icon.png) left no-repeat;
    padding-left: 17px;
}

And here's the CSS for the image on the right:

#funkystyling {
    background: white url(/path/to/icon.png) right no-repeat;
    padding-right: 17px;
}

Solution 4

I liked @KyleMit's answer on how to make an unstyled input group, but in my case, I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap. So, I did this:

css

.input-group.input-group-unstyled-right input.form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

html

<div class="input-group input-group-unstyled-right">
    <span class="input-group-addon">
        <i class="fa fa-envelope-o"></i>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-addon input-group-addon-unstyled">
        <i class="fa fa-check"></i>
    </span>
</div>

Solution 5

You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.

Here's an example, using Font Awesome for the search icon:

.search-box-container input {
  padding: 5px 20px 5px 5px;
}

.search-box-container:after {
    content: "\f002";
    font-family: FontAwesome;
    margin-left: -25px;
    margin-right: 25px;
}

<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="search-box-container">
  <input type="text" placeholder="Search..."  />
</div>

View more solutions

Comments

[Dan]

I don't think it's a good idea since this will make all inputs on the site 90%. If you want to go this route then you should create a custom class (not generic input)

[Jim]

He mentioned he did not want to use input-group

[KyleMit]

@Jim, Yeah, that's why my first suggestion doesn't include it, but other people are likely to hit this question at a later point in time who won't have the same restriction.

[Jim]

This is true, good thinking. Are you able to provide a solution that does what my example does -- Icon outside of the input element, without using input-group without custom css?

[KyleMit]

@Jim, If you don't want something to look like the bootstrap defaults, you're going to have to write CSS at some point. But you can put the icon outside of the search box by using an input-group for layout and then just taking away the input-group styling from the element. It's certainly less custom css, which means less to maintain :)

[OfirD]

@KyleMit, could it be that the fiddle doesn't work with IE11 (the glyphicons are not displaying properly)?

[KyleMit]

@HeyJude, I'm just getting burned this month because all my old fiddles used getbootstrap.com/dist/js/bootstrap.js which just cut over to V4 - Updated the Fiddle for 3.3.7 - should work now

[musicformellons]

Looks like it does not work for Bootstrap 4; what needs to be changed for that to work?