Hinzufügen eines Suchsymbols am Ende einer Eingabegruppe IN Bootstrap 3

Question

Formulare haben sich seit 2.4.3 geändert und This hätten vorher aber nicht mehr funktioniert.

Dies ist der aktuelle Code, den ich für meine Suchleiste habe.

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

So sieht es derzeit aus.

ich es schließlich so aussehen möchte.

Obwohl diese Frage nahe dieser this one. Sein anders als dass nur eine Taste ohne Raum zwischen den beiden auf der Außenseite mit. So gelangen Sie in die Suchleiste.

Answer 1

die Sie interessieren ..

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

Sie können eine spezielle CSS-Klasse verwenden, anstatt alle der input-group s vorran

Demo: http://bootply.com/86446

Answer 2

Sie können es technisch nicht "innerhalb" des Suchfelds platzieren, sondern legen Sie Ihre ÜBER das Suchfeld über absolute Positionierung.

Answer 3

Ich habe es mit gefälschten div gemacht.
FIDDLE

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

Answer 4

versuchen

<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>