twitter-bootstrap-3 - 在导航栏中搜索 TextField 的选项

Question

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

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

Answer 1

I think you will be able to do this leveraging input-groups. But the docs also mention:

Avoid using elements here as they cannot be fully styled in WebKit browsers.

HTML to integrate a <select> in the navbar:

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

Then apply the following 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; 
    }

Demo: http://www.bootply.com/8zPGZ9ySOl

I found this works well in chrome, but in firefox the select arrow got some button like styling:

I'm not sure how to fix the style of the select arrow here. Style the select with -moz-appearance:none or -moz-appearance:menulist won't help. Possible related to: Clearing the background of a <select> element's pulldown button with CSS