41

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.

John Saunders
  • 160,644
  • 26
  • 247
  • 397
Saurabh Mahajan
  • 2,937
  • 7
  • 25
  • 32
  • 1
    I think this might help: http://stackoverflow.com/questions/18429121/inline-form-nested-within-horizontal-form-in-bootstrap-3/23375097#23375097 You have to wrap each element within a `col-xs-#` – Dan Jul 10 '14 at 17:08

5 Answers5

118

Here are three different ways to do it:

screenshot

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

Community
  • 1
  • 1
KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • He mentioned he did not want to use input-group – Jim Jul 10 '14 at 17:40
  • 8
    @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. – KyleMit Jul 10 '14 at 17:43
  • 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? – Jim Jul 10 '14 at 17:46
  • @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 :) – KyleMit Jul 10 '14 at 18:17
  • @KyleMit, could it be that the fiddle doesn't work with IE11 (the glyphicons are not displaying properly)? – OfirD Feb 01 '18 at 11:20
  • 1
    @HeyJude, I'm just getting burned this month because all my old fiddles used http://getbootstrap.com/dist/js/bootstrap.js which just cut over to V4 - Updated the Fiddle for 3.3.7 - should work now – KyleMit Feb 01 '18 at 13:45
  • Looks like it does not work for Bootstrap 4; what needs to be changed for that to work? – musicformellons Feb 08 '21 at 11:19
4

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

Jim
  • 517
  • 2
  • 5
  • 11
  • 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`) – Dan Jul 10 '14 at 17:21
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;
}
Onel Sarmiento
  • 1,608
  • 3
  • 20
  • 46
vishnu ferno
  • 46
  • 1
2

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>
goat
  • 31,486
  • 7
  • 73
  • 96
1

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>
Code Slinger
  • 1,100
  • 1
  • 11
  • 16