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

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

jsiddle

Answer 2

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

  select { direction: rtl; }

Demo

  

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

请参阅direction参考。

请记住，这会在所有选择元素上应用样式，因此您可以使用id或class来应用特定的选择元素。

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