Style de saisie personnalisé avec une icône à l'intérieur et un bouton sur la droite

Question

J'essaie d'obtenir un style de saisie personnalisé avec une icône de glyphe à l'intérieur et un bouton sur la droite qui dit aller.

Voici mon violon avec elle. 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> 

Le problème que j'ai est quand je tente d'ajouter le bouton à droite, il fait disparaître l'icône lorsque l'entrée est cliqué.

Answer 1

En utilisant votre violon, j'ai simplement ajouté un bouton positionné dans votre boîte de recherche. Peut-être que c'est ce que vous cherchiez?

Ajout d'un bouton en 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> 

CSS Button:

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

https://jsfiddle.net/t6295xrd/

Answer 2

Voici un Demo pour ce que je compris de vous, je viens d'ajouter le bouton à votre violon et ajoutez ce CSS pour le positionner à droite.

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

ce qui est le code 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>