how to add Select Box arrow in left side

Question

I unable to add the arrow in select box i am using simply css code and finding other script but unable to add the arrow in select box left side

Any help from any one greatly appreciated.

Answer 1

Use the direction property in css of your select box. The direction property specifies the text direction/writing direction.

select { direction: rtl; }

It has a default value of ltr so change it to rtl. It will move your arrow to left.

Answer 2

I recommend to go with Uniform JS. This will be quite simple to integrate with websites. You will get full flexibility to change the select box.

URL: http://uniformjs.com/

Only thing you need to do is, you need to change the background image as you wish. http://uniformjs.com/images/sprite-aristo.png

Answer 3

To only move the arrow in the left side I have used only css:

select{
  direction: rtl;
}
select option{
  direction:ltr;
}

In this way the option still remain in ltr text.