Select box dir

Does anyone know if it's possible to align text to the right of a <select> or more specifically <option> element in WebKit. This does not need to be a cross-browser solution including IE, but should be pure CSS if it is possible. I have tried both: select { text-align: right } and option { text-align: right }, but neither seems to have worked in WebKit (either Chrome, Safari or Mobile Safari. Any help gratefully received! html css webkit shareimprove this question asked Oct 27 '11 at 18:38 BenM 37.3k1888134

add a comment

4 Answers

activeoldestvotes

up vote51down voteaccepted

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/ shareimprove this answer answered Oct 27 '11 at 18:47 Frank Parent 1,3961529

2   Actually, that's perfect. I was using the appearance: none; attribute anyway, so the position of the dropdown doesn't matter. Thanks! – BenM Oct 27 '11 at 18:48 18   This does not work in all cases: <option>23" x 42"</option> yields " x 42"23. rtl also changes how it is read in a screen reader. – Jason T Featheringham Aug 30 '12 at 17:37  2   RTL - is the text direction (as example for arabic text) jsfiddle.net/iegik/YSJU7/170 – iegik Sep 23 '12 at 11:45 6   Doesn't it look like a dirty hack just to give it the proper look without thinking about how it would be processed in some special cases? – Sergei Basharov May 30 '13 at 8:04  19   IMHO this is bad for two reasons. 1. It's semantically wrong. 2. In Chrome 30, dir="rtl" moves the arrow indicating the drop-down to the left. – feklee Oct 31 '13 at 20:13 show 2 more comments

up vote24down vote

I think what you want is: select { direction: rtl; } fiddled here: http://jsfiddle.net/neilheinrich/XS3yQ/