CODEWITHSUNDEEP
htmlcsswebkit
BenM
BenM

Reputation: 53198

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

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!

Upvotes: 101

Views: 174463

Answers (5)

Ashish Sharma
Ashish Sharma

Reputation: 11

I was facing the same issue in which I need to align selected placeholder value to the right of the select box & also need to align options to right but when I have used direction: rtl; to select & applied some right padding to select then all options also getting shift to the right by padding as I only want to apply padding to selected placeholder.

I have fixed the issue by the following the style:

select:first-child{
  text-indent: 24%;
  direction: rtl;
  padding-right: 7px;
}

select option{
  direction: rtl;
}

You can change text-indent as per your requirement. Hope it will help you.

Upvotes: 1

Laiacy
Laiacy

Reputation: 1600

The following CSS will right-align both the arrow and the options:

select { text-align-last: right; }
option { direction: rtl; }
<!-- example usage -->
Choose one: <select>
  <option>The first option</option>
  <option>A second, fairly long option</option>
  <option>Last</option>
</select>

Upvotes: 99

Martin Schilliger
Martin Schilliger

Reputation: 838

The best solution for me was to make 

select {
    direction: rtl;
}

and then 

option {
    direction: ltr;
}

again. So there is no change in how the text is read in a screen reader or and no formatting-problem.

Upvotes: 34

Frank Parent
Frank Parent

Reputation: 2164

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/

Upvotes: 92

nheinrich
nheinrich

Reputation: 1841

I think what you want is:

select {
  direction: rtl;
}

fiddled here: http://jsfiddle.net/neilheinrich/XS3yQ/

Upvotes: 25

Related Questions