ブートストラップの選択は、Firefoxでは異なるレンダリングされ、クロム

Question

ブートストラップの選択は、Firefoxとクロームでは異なるレンダリングされます。

がどのように2つのブラウザが同じようにレンダリングしない

クローム：

のFirefox ？ Chromeの方が好きです。

私の質問はTHID質問 からdiferentです：この三角形をレンダリングするブラウザ以外の方法、問題は幅または高さではないので、問題は選択フィールド内（右中）三角形であるTwitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox

このケースでは、以下の質問に対する答えは当てはまりません。

Answer 1

同じように表示されません。エクスプローラは単語であると、すべてのブラウザが異なって見える！

私はちょうどこの日に取り組んでいました！ボーダーと右下の逆三角形の背景イメージを含む背景divを持つことができます。その後、最初の選択肢（あなたの場合は「1」）でdivの上にスパンを置きます。その後、絶対配置とゼロ不透明でdiv/spanの上に選択メニューを配置します。これにより、選択メニューのブラウザのデフォルトがまったく表示されなくなります。

http://codepen.io/ruchiccio/pen/zqbaKN

<div class="selector"> 
    <span>Show 24</span> 
     <select class="form-control"> 
     <option value="">Show 24</option> 
     <option value="">Show 48</option> 
     <option value="" selected>Show 96</option> 
     <option value="">View all</option> 
     </select> 
    </div> 

Answer 2

誰かのために有用ならば、私の問題を解決したコードは、このでした：私は上記のthew答えにRachel Sから渡された例/リンクに基づいて、このコードをした

select.custom { 
         background-image: url("https://lh3.googleusercontent.com/-UO0rQxRXKW0/VzN-mqXyiUI/AAAAAAAAPgM/XQibxHl_LcI57GDUV49IUQUYf6_OUvkngCCo/s166/Untitled-1.gif"); 
         -moz-appearance: none; 
         padding-right: 25px; 
         background-repeat: no-repeat; 
         background-position: right center; 
         -webkit-appearance: none; 
         -moz-appearance: none; 
         appearance: none; 
        } 
<select class="form-control custom"> 
    <option>1</option> 
    <option>2</option> 
</select> 

リンクは次のとおりです：http://codepen.io/ruchiccio/pen/zqbaKN