HTML select and option mixed directions (ltr & rtl)

html css html-select direction
qrrr picture qrrr · Jul 10, 2014 · Viewed 9.5k times · Source

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.

Answer

c-smile picture c-smile · Dec 14, 2014

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

Related questions

How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
Change select box option background color

I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options. See Fiddle HTML: <select> <option val="">Please choose&…

Read More
How to use Checkbox inside Select Option

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list. Is there anyway possible to add a checkbox inside a Select Option menu? …

Read More