text-align:在<select>或<option>上右键

Question

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

我试过了两个:

select { text-align: right }并且option { text-align: right },似乎在WebKit(Chrome,Safari或Mobile Safari)中都没有.

任何帮助感激不尽!

Answer 1

您可以尝试使用"dir"属性,但我不确定是否会产生所需的效果？

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

在这里演示:http://jsfiddle.net/fparent/YSJU7/

Answer 2

以下CSS将右对齐箭头和选项:

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>

Answer 3

对我来说最好的解决方案是制作

select {
    direction: rtl;
}

然后

option {
    direction: ltr;
}

再次.因此,在屏幕阅读器中读取文本的方式没有变化,也没有格式问题.

Answer 4

我想你想要的是:

select {
  direction: rtl;
}

在这里摆弄:http://jsfiddle.net/neilheinrich/XS3yQ/