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>

用户点击后是否有任何方法可以将选项拉到左侧。

这适用于Chrome，但不适用于Firefox。用户点击选择列表后，Chrome浏览器视图就会显示

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

提前致谢

Answer 1

我找到了上述问题的一个解决方案，我们可以给出从右到左选择列表的方向，这将显示列表以及右侧的选项。要向左侧显示选项，请向左显示文本对齐。请注意，该方向仅适用于mozilla firefox，因为它在Chrome和IE中运行良好。

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更改选择箭头。

选择列表选项在Firefox中隐藏

1 个答案: