Question

我有以下用于呈现HTML下拉列表的标记。在我的网页上，下拉列表位于容器的最右侧。下拉列表包含一些冗长的文本。

当在Chrome中打开时，下拉菜单从右向左正确打开，从而清楚地显示最长的选项。 firefox下拉列表从左向右开始的位置，因此一些选项文本会从屏幕中消失。

在firefox中是否有任何改变此行为的方式/ css。

<div style="float:right;">
    <select id="select_1" style="width:100px;" name="select_1">
        <option value="-1" selected="selected">Browse options</option>
        <option value="-1">------------------------------------</option>
        <option value="224">Option 1</option>
        <option value="234">Longer title for option 2</option>
        <option value="242">Very long and extensively descriptive title for option 3</option>
    </select>
</div>

Answer 1

使用此功能可以帮助您

@-moz-document url-prefix() {
select {
    direction: rtl;
}
option{
    text-align: left;
}
}

Answer 2

问题是由使用固定宽度（100px）

设置select元素引起的

删除它，select元素将在所有浏览器中正常工作。

Fiddle

如果保持宽度很重要，那么您可以使用仅限Firefox的CSS将宽度更改回Firefox中的auto。

NB ：在生产代码中依赖这些黑客通常不赞成。请谨慎使用！

Fiddle

select {
  width: 100px;
}
/* firefox-only CSS..
WARNING: Use at your own risk */

@-moz-document url-prefix() {
  select {
    width: auto;
  }
}

<div style="float:right;">
  <select id="select_1" name="select_1">
    <option value="-1" selected="selected">Browse options</option>
    <option value="-1">------------------------------------</option>
    <option value="224">Option 1</option>
    <option value="234">Longer title for option 2</option>
    <option value="242">Very long and extensively descriptive title for option 3</option>
  </select>
</div>

选择列表的样式选项元素从右到左打开

2 个答案:

Fiddle

Fiddle