HTML selection and related directions options (ltr & rtl)

Question

I have a selection box that I want to align to the right, but I want the dropdowns to be aligned to the left. For instance:

<select>
  <option>item</option>
</select>

And CSS:

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

But setting the direction of the select tag also sets the direction of the drop-down menu. See here

Is it possible? I know that as an alternative, I could create a custom select function using js, but I would like it to be simple if possible.

Answer 1

direction: rtl; . , , . , .

( - , ).

Sciter <select>, DOM:

select > caption { text-align:right; } 
select > button { ... } 
select > popup > option { text-align:left; } 

, Sciter , <select> - .

- <select> , http://getbootstrap.com/components/#btn-dropdowns

Answer 2

,

.1 {
    direction: ltr;
}

. .1 . : .\000031.

, ...

.\000031 {
    direction: ltr;
}

... , , Firefox 37.

, select.

#ex-1 {
    direction: rtl;
    width: 120px;
}
.\000031 {
    direction: ltr;
}

<select id="ex-1">
    <option class='1'>item one</option>
    <option class='1'>item two</option>
    <option class='1'>item three</option>
</select>

Hide result