Select 列表选项在 Firefox 中被隐藏

Question

我有一个问题与 Firefox 中的 select 列表有关。

如果我有 select 带有长选项的列表，它被拉到右边。每当用户单击后出现 select 列表时，选项中的文本就会隐藏。

<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 中不行。 Chrome 用户点击 select 列表后的视图

Firefox View 在用户点击后隐藏文本。

提前致谢

Answer 1

我找到了解决上述问题的方法，我们可以将 select 列表的方向指定为从右到左，这将在右侧显示列表和选项。要在左侧显示选项，请将 text-align 设置为左侧。请注意，该说明仅适用于 mozilla firefox，因为它在 Chrome 和 IE 中运行良好。

jsfiddle link 是， 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 更改 select 箭头。

Select 列表选项在 Firefox 中被隐藏

Select list options gets hide in Firefox

css

firefox

html-select

dropdown