text-align: right on <select> or <option>
You could try using the "dir" attribute, but I'm not sure that would produce the desired effect?
<select dir="rtl">
<option>Foo</option>
<option>bar</option>
<option>to the right</option>
</select>
Demo here: http://jsfiddle.net/fparent/YSJU7/
The best solution for me was to make
select {
direction: rtl;
}
and then
option {
direction: ltr;
}
again. So there is no change in how the text is read in a screen reader or and no formatting-problem.
The following CSS will right-align both the arrow and the options:
select { text-align-last: right; }
option { direction: rtl; }
<!-- example usage -->
Choose one: <select>
<option>The first option</option>
<option>A second, fairly long option</option>
<option>Last</option>
</select>