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!
I think what you want is:
select {
direction: rtl;
}
fiddled here: http://jsfiddle.net/neilheinrich/XS3yQ/
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.
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.
The following CSS will right-align both the arrow and the options:
select { text-align-last: right; }_x000D_
option { direction: rtl; }
_x000D_
<!-- example usage -->_x000D_
Choose one: <select>_x000D_
<option>The first option</option>_x000D_
<option>A second, fairly long option</option>_x000D_
<option>Last</option>_x000D_
</select>
_x000D_
Source: Stackoverflow.com