How can I move the dropdown button on a form select to the left side?

Question

I have an html dropdown:

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

I would like to know if there is any possible way to move the little down arrow box to the left side of the list instead of the right? Hopefully there is some nice html or css that will do the trick?

Answer 1

Given the following 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>

you can use the following CSS

#mySelect{ direction: rtl; }

jsiddle

Answer 2

Yes you can use direction right to left to move the arrow to the left.

  select { direction: rtl; }

Demo

rtl : Text and other elements go from right to left

See direction reference.

Remember this will apply style on all select elements so you can use either id or class to apply to the specific select elements.

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