Custom input style with a icon inside and button in the right

Question

I am trying to get a custom input style have a glyph icon inside and have a button on the right that says go.

Here is my js fiddle with it. jsfiddle

<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>

The problem i am having is when i try to add the button on the right it makes the icon disappear when the input is clicked.

Answer 1

Using your fiddle I simply added an absolutely positioned button into your search box. Perhaps this is what you were looking for?

Added button in HTML:

<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="button-go">go</button>

Button's CSS:

.button-go {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
}

https://jsfiddle.net/t6295xrd/

Answer 2

Here is a Demo for what i understood from you i just add the button to your fiddle and add this css to position it on right.

#Order_Search {
    padding-right:20px;
}
.go-btn {
    position: absolute;
    right: 3px;
    margin-left: -2.5px;
    top: 2px
}

and this is the html

<div class="form-group">
  <div class="icon-addon addon-sm">
    <input type="text" placeholder="Search All Orders" class="form-control" id="Order_Search">
    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
    <button class="go-btn"> Go </button>
</div>