Firefox에서 목록 선택 옵션이 표시됩니다.

Question

Firefox에서 선택 목록과 관련된 한 가지 질문이 있습니다.

길이가 긴 목록을 선택하면 오른쪽으로 당겨집니다. 사용자가 클릭 한 후 선택 목록이 나타날 때마다 옵션의 텍스트가 숨겨집니다.

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

JSfiddle

는 사용자가 클릭 후 왼쪽에 옵션을 풀 수있는 방법이입니다.

Chrome에서는 문제가 없지만 Firefox에서는 문제가 없습니다. 크롬보기

파이어 폭스보기 사용자가 클릭 한 후 텍스트를 숨 깁니다 선택 목록에서 사용자가 클릭 한 후 같습니다. 나는 위의 문제에 대한 하나의 해결책을 발견 사전

Answer 1

에

덕분에, 우리는 오른쪽에 목록뿐만 아니라 옵션이 표시되는 오른쪽에서 왼쪽으로 목록을 선택하는 방향을 제공 할 수 있습니다. 왼쪽에 옵션을 표시하려면 텍스트 정렬을 왼쪽으로 지정하십시오. 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를 사용하여 변경할 수 있습니다.