Right align text in Select Dropdown without arrow moving

Question

I would like to right-align the text within a select box, but when I add:

dir="rtl"

to the select, the default drop-down arrow moves to the left in Firefox while staying on the right in Chrome:

http://jsfiddle.net/6dts82hL/

I would like to keep the arrow by default to the right, while the text aligns right in all browsers because I will be using CSS to modify this arrow using this method:

http://bavotasan.com/2011/style-select-box-using-only-css/

Your help is much appreciated!

i dont think you can unless you use something like select2 – Daniel A. White Apr 08 '15 at 17:36 — Daniel A. White, Apr 08 '15 at 17:36

score 0 · Answer 1 · answered Apr 09 '15 at 17:42

0

I ended up using the select2 library, as mentioned by Daniel A. White. It did exactly what I needed!

answered Apr 09 '15 at 17:42

steeped

2,613
5
27
43

Right align text in Select Dropdown without arrow moving

1 Answers1