在navbar中搜索TextField的选项

Question

用户是否可以从实用程序下拉列表（见下图）中选择一个影响搜索文本字段的搜索选项？

或者可以将下拉列表和搜索文本字段合并在一起吗？

Answer 1

我认为你可以利用input-groups来做到这一点。但文档也提到：

  

避免在这里使用元素，因为它们无法完全设置样式   WebKit浏览器。

用于在导航栏中集成<select>的HTML：

<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

我发现这在chrome中运行良好，但在firefox中，选择箭头有一些像样式的按钮：

我不确定如何修复选择箭头的样式。使用-moz-appearance:none或-moz-appearance:menulist帮助确定选择的样式。可能与：Clearing the background of a <select> element's pulldown button with CSS

有关