text-align：正确或

Question

有没有人知道是否可以将文本对齐到<select>或更具体的<option>元素右侧的WebKit。这不需要是包含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/

Answer 5

我遇到了同样的问题，我需要将选定的占位符值与选择框的右侧对齐，还需要将选项对齐到右边但是当我使用了方向时：rtl;选择并应用一些正确的填充来选择然后所有选项也通过填充向右移动，因为我只想将填充应用于选定的占位符。

我通过以下样式修复了问题：

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

select option{
  direction: rtl;
}

您可以根据需要更改文本缩进。希望它会对你有所帮助。