搜索TextField在導航欄中的選項

Question

用戶是否可以從實用程序下拉列表中選擇一個搜索選項，以影響搜索文本字段？

或者是有可能合併的下拉菜單和搜索文本字段一起？

Answer 1

我想你可以利用input-groups來做到這一點。但文檔中還提到：

避免使用元素，因爲它們不能在 WebKit瀏覽器中完全樣式化。

HTML在導航欄一<select>整合：

<form class="navbar-form navbar-left select-search" role="search"> 
<div class="input-group"> 
<span class="input-group-addon">   
<select class="form-control"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 
</span> 
<input type="text" class="form-control"> 
</div> 
<button type="submit" class="btn btn-default">Submit</button> 
</form> 

然後採用下列CSS：

.select-search .input-group-addon { 
    padding: 0; 
    border: 0; 
    } 
    .select-search .input-group .input-group-addon > select.form-control { 
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
    } 

演示：http://www.bootply.com/8zPGZ9ySOl

我發現這個效果很好鉻，但在Firefox中選擇箭頭有一些按鈕樣式：

我不知道如何解決在這裏選擇箭頭的樣式。樣式選擇與-moz-appearance:none或-moz-appearance:menulist不會幫助。可能與以下相關：Clearing the background of a <select> element's pulldown button with CSS