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/

Answer 5

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

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

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

select option{
  direction: rtl;
}

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

text-align：在<select>或<option> </option> </select>上

5 个答案: