twitter-bootstrap-3 - 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

これはクロムでうまく機能することがわかりましたが、Firefox では、選択矢印にスタイリングのようなボタンが表示されます。

ここで選択矢印のスタイルを修正する方法がわかりません。選択をスタイリングする-moz-appearance:noneか-moz-appearance:menulist、助けにはなりません。関連する可能性があるもの: <select> 要素のプルダウン ボタンの背景を CSS でクリアする