html - 如何将表单选择上的下拉按钮移动到左侧？

Question

我有一个 html 下拉列表：

<form>
<select>
<option value="1">Client: Zac Brown Band</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
</form>

我想知道是否有任何可能的方法将小向下箭头框移动到列表的左侧而不是右侧？希望有一些不错的 html 或 css 可以解决问题吗？

Answer 1

给定以下 HTML

<select id="mySelect">
<option value="1">Client: Zac Brown Band</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>

您可以使用以下 CSS

#mySelect{ 方向：rtl; }

中间件

Answer 2

是的，您可以使用direction right to left将箭头向左移动。

  select { direction: rtl; }

演示

rtl ：文本和其他元素从右到左

参见方向参考。

请记住，这将对所有选择元素应用样式，因此您可以使用 id 或类来应用到特定的选择元素。

HTML

<select class="reverse">
<option value="1">Client: Zac Brown Band</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>

CSS

.reverse
{ 
  direction: rtl; 
}