HTML select and option mixed directions (ltr & rtl)

Question

I have a select box that I want to be aligned to the right, but I want to keep the options dropdown aligned to the left. Like so:

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

And the CSS:

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

But setting the direction of the select tag also sets the direction of the select dropdown menu. See here

Is this even possible? I know that I could, as an alternative, build a custom select functionality with js, but I'd like to keep it simple if I can.

Astrea

Can you post a picture mentioning what you want? – Flourishing

I updated the fiddle to maybe explain it better. I want the selected option right justified, and the options that appear on clicking the select to be left justified. – Astrea

Identifiers can't start with numbers. Therefore, .1 is a wrong selector. You should escape it: .\000031. – Tinkling

Right. I whipped up a quick example, should have looked at it further, but as you can see here that with proper css selecting the situation persists. – Astrea

Same problem, seems it's a problem of browser compatibility #37788234 – Albin

Answer 1

direction: rtl; is not exactly text alignment. Or to be precise text alignment is a side effect of direction. Note that direction also affects position of the dropdown arrow in your setup.

Conventional browsers do not allow you to style select element (it looks significantly different on different platforms, especially mobiles).

In Sciter you can style <select> parts individually as select components are normal DOM elements there:

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

I've made it possible as Sciter is designed specifically for desktop UI and <select> styling is a must there.

As a solution for plain web pages I would suggest to use <select> substitutes like http://getbootstrap.com/components/#btn-dropdowns

Labiodental

Yea, I came to that conclusion as well: to use select alternatives since they're really not that difficult to make. – Astrea

Answer 2

The problem with your fiddle is that you use

.1 {
    direction: ltr;
}

However, identifiers can't start with numbers. Therefore, .1 is a wrong selector. You should escape it: .\000031.

Then, if you use...

.\000031 {
    direction: ltr;
}

...it works as you want, at least on Firefox 37.

Note other browsers may not allow you to style select elements.

#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>

Tinkling

Interesting, but as you can see here that with correct css selecting the issue persists. I'm inclined to not use select's at all unless they don't need to be styled... A little javascript and some div's and it can be done pretty easily & with much more flexibility. – Astrea