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

Question

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

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

是否有任何方法/css可以更改firefox中的这种行为。

<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

问题是由将select元素设置为固定宽度（100px）引起的

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

Fiddle

如果保持宽度对您来说很重要，那么您可以在firefox中使用仅限firefox的CSS将宽度更改回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>