文本对齐：在<select>或<option>上

有谁知道是否有可能将文本对齐到WebKit中一个<select>或更具体的<option>元素的右边。这不必是包括IE的跨浏览器解决方案，但如果可能的话，应该是纯CSS。

我都尝试过：

select { text-align: right }和option { text-align: right }，但似乎都无法在WebKit中使用（Chrome，Safari或Mobile Safari。

任何帮助表示感谢！

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

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

此处的演示：http : //jsfiddle.net/fparent/YSJU7/

以下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>

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

select {
    direction: rtl;
}

然后

option {
    direction: ltr;
}

再次。因此，在屏幕阅读器中阅读文本的方式没有改变，也没有格式问题。

我认为您想要的是：

select {
  direction: rtl;
}

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

我面临着同样的问题，我需要将选择的占位符值对齐到选择框的右边，还需要将选项对齐到右边，但是当我使用了Direction时：选择并应用一些右填充来选择，然后所有选项也会通过填充向右移，因为我只想将填充应用于所选的占位符。

我已通过以下样式解决了此问题：

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

select option{
  direction: rtl;
}

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