Dodaj ikonę wyszukiwania na końcu grupy wejściowej IN bootstrap 3

Question

Formularze zostały zmienione od wersji 2.4.3, a This działały wcześniej, ale już nie.

To jest obecny kod, który mam na pasku wyszukiwania.

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

Oto, jak obecnie wygląda.

chciałbym go ostatecznie wyglądać.

Chociaż ta kwestia jest blisko tego this one. Jego różne, jak to jest tylko o przycisk na zewnątrz bez przestrzeni pomiędzy nimi. Oto jak dostać się do paska wyszukiwania.

Answer 1

Spróbuj ..

.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; 
} 

Możesz użyć specjalnego klasę CSS zamiast przesłanianie wszystkie z input-group s

Demo: http://bootply.com/86446

Answer 2

Nie można technicznie umieścić go "wewnątrz" pola wyszukiwania, a raczej przesłać PRZESYŁKĘ w polu wyszukiwania poprzez pozycjonowanie bezwzględne.

Answer 3

Zrobiłem to za pomocą fałszywego diva.
FIDDLE

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

Answer 4

spróbuj