在导航栏中搜索 TextField 的选项答案

【问题标题】：options for search TextField in navbar在导航栏中搜索 TextField 的选项
【发布时间】：2014-12-20 21:45:33
【问题描述】：

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

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

【问题讨论】：

也许 bootstrap typeahead 是您正在寻找的？ twitter.github.io/typeahead.js

标签： twitter-bootstrap-3 bootstrap-select

【解决方案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

【讨论】：