Add a Search icon in the end of a input-group IN bootstrap 3

Question

Forms have changed since 2.4.3 and This would have worked before but not anymore.

This is the current code I have for my search bar.

<li>
   <div class="input-group" id="fifteenMargin">
      <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
   </div>
</li>

This is what it currently looks like.

I would like it to eventually look like this.

Although this question is close this to this one its different as that is just having a button on the outside without space between the two. This is how to get it into the search bar.

Answer 1

Try this..

.input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.input-group .form-control:focus {
 box-shadow:none;
 -webkit-box-shadow:none; 
 border-color:#cccccc; 
}

You may want to use a special CSS class instead of overriding all of the input-groups

Demo: http://bootply.com/86446

Answer 2

try

<div class="input-group">
    <span class="input-group-addon">
        <i class="glyphicon glyphicon-user"></i>
    </span>
    <input type="text" name="login" class="form-control" placeholder="Ваш логин">
</div>

Answer 3

You can't technically place it "inside" the search box, rather place your submit OVER the search box via absolute positioning.

Answer 4

I got it done using fake div.
FIDDLE

.styleSelect {
    position:absolute;
    z-index:10;
  width: 168px;
  height: 34px;
  border: 1px solid #000;
}