bootstrap Eingabegruppe Wählen Sie Feld, Textfeld und Suchfeld

Question

Ich möchte Suchleiste ähnlich Amazon Website erstellen.

Ein Auswahlfeld gefolgt von einem Eingabefeld gefolgt von der Suchschaltfläche.

das ist, was ich bisher habe:

Das Problem ist, dass das button1 Dropdown kein Auswahleingabefeld ist, wenn ich zu Eingabefeld alles Pausen ändern sich.

Beispiele in Bootstrap-Seite nicht Gruppe mit Eingabefeld anzeigen aber Dropdown-Menü anzeigen.

meinen Code

<div class="input-group input-group-lg"> 

     <input type="text" name="query" class="form-control" placeholder="Search this site" /> 
     <span class="input-group-btn"> 

      <button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button> 
      <ul class="dropdown-menu pull-right"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     <button class="btn btn-primary" type="submit"> 
       <span class="glyphicon glyphicon-search"></span> 
      </button> 
    </span> 


     </div> 

CSS - Kurvenradius für Mitte Eingabefeld oder Tasten

.custom{ 
    -webkit-border-radius: 0px !important; 
    -moz-border-radius: 0px !important; 
    border-radius: 0px !important; 
} 

Answer 1

einfach mit der rechten klicken Sie auf die Amazon Suchleiste zu entfernen, und hinter den Code überprüfen.

Answer 2

Bitte schauen Sie sich meine Demo an. Wenn Sie Ihren Stil hinzufügen möchten, fügen Sie den Komponenten eine Klasse hinzu, um den Stil zu ändern.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="col-md-6"> 
 
<div class="input-group"> 
 
    <div class="input-group-btn"> 
 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apps & Games <span class="caret"></span></button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
     </div><!-- /btn-group --> 
 
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> 
 
    <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span> 
 
</div> 
 
</div> 
 
</div>

Answer 3

Ich habe es dies nur amazon wie Suche mit gelöst:

<div class="input-group my-group"> 

      <select id="filter_type" name="filter_type" class="selectpicker form-control" style="width:30%;"> 
         <option value>Select Filter Type..</option> 
         <option value="all">All</option> 
         <option value="firstname">First Name</option> 
         <option value="lastname">Last Name</option> 
         <option value="email">Email</option> 

        </select> 
      <select id="search" name="search" class="selectpicker form-control" disabled="disabled" style="width:70%; display:block;"> 
         <option value>select filter type first</option> 
         </select> 

        <input type="text" class="form-control" style="width:70%; display:none" name="searchfield" id="searchfield" placeholder="Enter username..."> 

      <span class="input-group-btn"> 
    <button id="submit" name="submit" class="btn btn-primary" disabled="disabled" type="submit">Filter</button> 
    </span> 

     </div>