文本对齐: 右上 < 选择 > 或 < 选项 >

有没有人知道是否可以将文本对齐到 <select>的右侧,或者更具体地说,是 WebKit中的 <option>元素。这不需要是一个跨浏览器的解决方案,包括 IE,但应该是纯 CSS,如果可能的话。

我两种方法都试过了:

select { text-align: right }option { text-align: right },但似乎都没有工作在 WebKit (无论是 Chrome,Safari 或移动 Safari。

感谢您的帮助!

161556 次浏览

I think what you want is:

select {
direction: rtl;
}

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

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/

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; }
option { direction: rtl; }
<!-- example usage -->
Choose one: <select>
<option>The first option</option>
<option>A second, fairly long option</option>
<option>Last</option>
</select>

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.