Firefoxで選択リストオプションが表示されないようにする

Question

Firefoxで選択リストに関連する質問が1つあります。

私は長いオプションのリストを選択している場合、それは右に引っ張られます。ユーザーのクリック後に選択リストが表示されるたびに、オプションのテキストが非表示になります。

JSfiddle

<div class="container"> 
    <div class="row"> 
    <div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;"> 
     <div class="row"> 
     <div class="input-group pull-right" style="width:150px"> <span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span> 
      <select class="form-control input-sm pull-left"> 
      <option value="1">option 1 This is option which will be hide</option> 
      <option value="2">option 2</option> 
      <option value="3">option 3</option> 
      </select> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

ユーザーがクリックした後、左側にオプションを引くためにどのような方法がありますです。

これはChromeでは問題なく動作しますが、Firefoxではうまく動作しません。 クロームビューが選択リスト上のユーザーがクリックした後のようになり

Firefoxの表示には、ユーザーのクリックした後、テキストを非表示にします。私は上記の問題の一つの解決策を見つけた事前

Answer 1

に

おかげで、我々は右側のリストなどのオプションが表示されますどの右から左へとリストを選択するための方向性を与えることができます。 左側にオプションを表示するには、text-alignを左に指定します。 方向はChromeとIEでうまく動作するため、mozilla firefoxにのみ適用されます。

jsfiddleリンクは、 JsFiddleです。

<div class="container"> 
    <div class="row"> 
    <div id="header-right-container" class="col-lg-3 col-md-4 col-sm-4 col-xs-12" style="background-color: #eee;"> 
     <div class="row"> 
     <div class="input-group pull-right" style="width:150px"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span> 
      <select class="form-control input-sm pull-left"> 
      <option value="1">option 1 This is option which will be hide</option> 
      <option value="2">option 2</option> 
      <option value="3">option 3</option> 
      </select> 
     </div> 
     </div>    
    </div> 
    </div> 
</div> 

<style> 
    .row { 
    padding: 10px; 
    } 
@-moz-document url-prefix() { 
    select{ 
    direction:rtl; 
    } 
    option{ 
    text-align: left; 
    } 
</style> 

選択矢印は、cssを使用して変更できます。