change direction of select input

Question

After spending a while on looking for an answer, I came here :)

I have a input select which is in a LTR style. By that I mean that the dropdown arrow is shown on the right. I want it to be on the left in a "RTL style". (My rep is too low to post the image, sorry about that).

<select name="sort" id="sort" onchange="this.form.submit()">
        <option selected="selected" value="featured">Featured Items</option>
        <option value="newest">Newest Items</option>
        <option value="bestselling">Bestselling</option>
        <option value="alphaasc">Alphabetical: A to Z</option>
        <option value="alphadesc">Alphabetical: Z to A</option>
        <option value="avgcustomerreview">Avg. Customer Review</option>
        <option value="priceasc">Price: Low to High</option>
        <option value="pricedesc">Price: High to Low</option>
    </select>

Thank you very much!

This has been asked quite a few times here it seems. E.g. the one above and http://stackoverflow.com/questions/12668404/css-select-box-arrow-style — Roope, Apr 20 '14 at 15:40

score 1 · Answer 1 · answered Apr 20 '14 at 15:38

1

You can try it with CSS like that:

select {
    direction: rtl;
}

However I don't sure based on your description.

http://jsfiddle.net/Volter9/d8kgb/

answered Apr 20 '14 at 15:38

volter9

737
5
16

score 1 · Answer 2 · answered Apr 20 '14 at 15:40

1

You want the dropdown arrow (that is on default on the right side) to the left? Use this css:

select { direction: rtl; }

answered Apr 20 '14 at 15:40

Kai

1,156
8
18

change direction of select input

2 Answers2