text-align: right on <select> or <option>

html css webkit
BenM picture BenM · Oct 27, 2011 · Viewed 134.7k times · Source

Does anyone know if it's possible to align text to the right of a <select> or more specifically <option> element in WebKit. This does not need to be a cross-browser solution including IE, but should be pure CSS if it is possible.

I have tried both:

select { text-align: right } and option { text-align: right }, but neither seems to have worked in WebKit (either Chrome, Safari or Mobile Safari.

Any help gratefully received!

Answer

Frank Parent picture Frank Parent · Oct 27, 2011

You could try using the "dir" attribute, but I'm not sure that would produce the desired effect?

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

Demo here: http://jsfiddle.net/fparent/YSJU7/

Related questions

Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute: list-style-image And then giving it a URL. However, in my case, I just want to use the '+' symbol. I don't want …

Read More
HTML5 placeholder css padding

I've seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate. Anyway, here is the code for the css. (EDIT: This is the generated …

Read More
How to style HTML5 range input to have different color before and after slider?

I want the left side to be green and the right side to be gray. As pictured above would be PERFECT. Preferably a pure CSS solution (only need to worry about WebKit). Is such a thing possible?

Read More