Surprisingly in
<select>
<option>Text</option>
</select>
option {
text-align: right;
}
does not work, and I am in search of a solution to achieve this. I understand this is small question, but I can't figure out why it is not working
Asked
Active
Viewed 9,992 times
0
Ilja
- 44,142
- 92
- 275
- 498
-
Simple - it is still impossible to style option tag with CSS only: http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select – sinisake May 01 '15 at 10:38
-
DUPLICATE http://stackoverflow.com/questions/24448122/align-select-options-text-to-right – Coder May 01 '15 at 10:40
1 Answers
2
Try with direction attribute and use the direction right to left i.e. rtl
<select dir="rtl">
<option>Text</option>
</select>
Update : if you want to keep arrow icon to right with options to be aligned right then you can just set the property on option instead of select
option{
direction:rtl;
}
Sachin
- 40,216
- 7
- 90
- 102
-
Works, although it also moves select button to the opposite (left) side, where as I'd like just text aligned to it. – Ilja May 01 '15 at 11:03
-
@Ilja. I have updated the post. Please take a look and let me know if it works for you – Sachin May 01 '15 at 11:12
-
1Not quiet, it aligns option list to the right when it is expanded, but what I am trying to achieve here is move just text to the right so in an updated example http://jsfiddle.net/f39v7fyp/3/ See how there is a lot of whitespace on the right from the text? I want this whitespace to occur on the left. – Ilja May 01 '15 at 16:58