bootstrap輸入組選擇字段，文本字段和搜索字段

Question

我想要建立類似於亞馬遜網站的搜索欄。

選擇輸入字段，後跟輸入字段，後跟搜索按鈕。

這是我這麼遠：

的問題是，Button1的下拉列表不是一個選擇輸入框，如果我不改變輸入字段一切休息。

引導站點中的示例不顯示輸入字段選擇組，但下拉菜單組。

我的代碼

<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 - 以刪除中心輸入字段曲線半徑或按鈕

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

Answer 1

只要右擊亞馬遜搜索欄後面檢查的代碼。

Answer 2

請看看我的演示。如果你想添加你的風格，然後添加類到組件來改變風格。

<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

我把它用這個解決了，就像搜索亞馬遜：中

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