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

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