<select>或<option>上的text-align: right是什么意思？

Question

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

我尝试了select { text-align: right }和option { text-align: right }，但似乎在WebKit中都没有起作用（无论是Chrome、Safari还是移动版的Safari）。

非常感谢任何帮助！

- BenM

---

某处存在一个非常愚蠢的原因，解释为什么 option {text-align: right;} 不起作用。 - Bob Stein

Answer 1

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

- Laiacy

---

谢谢@Laiacy - 这太棒了！我希望你会得到更多的赞。 - elPastor

@Ryan，我已经编辑了我的答案。现在适用于下拉菜单中的选择和选项值。如果可以，请告诉我它是否有效。 - Laiacy

很遗憾，这个不起作用。<option>.1</option><option>1</option><option>10</option>会给出右对齐的 1. 和 1 和 01（点被反转）。http://jsfiddle.net/c2gka8o0/ - Tino

如果你移除 direction: rtl; 这一部分，我会点赞的。那是一个hack，绝对不应该使用。 - IAmNaN

警告：direction: rtl; 告诉 CSS 这是一种从右到左的语言（例如希伯来语）。这导致我的文本从“11 AM”反转为“AM 11”。 - Dominic Holmes

Answer 2

你可以尝试使用 "dir" 属性，但我不确定那会产生期望的效果？

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

这里有一个演示：http://jsfiddle.net/fparent/YSJU7/

- Frank Parent

---

并非所有情况下都适用：<option>23" x 42"</option> 会产生 " x 42"23。 使用 rtl（从右到左）阅读方式也会影响屏幕阅读器的阅读。 - Jason

RTL - 是文本方向（例如阿拉伯文本）http://jsfiddle.net/iegik/YSJU7/170/ - iegik

这看起来不像是一种良好的解决方法，只是为了让它看起来合适，而没有考虑在某些特殊情况下如何处理它。 - Sergei Basharov

我认为这个有两个问题。第一，它的语义是错误的。第二，在Chrome 30中，“dir =” rtl“将使指示下拉箭头向左移动。 - feklee

这是一个糟糕的想法，RTL是为从右到左书写字符的语言设计的，如果你在这样的选项中输入LTR语言编写的内容，则会严重破坏内容。例如，“10 Aug 2017”这样的日期将被显示为“Aug 2017 10”。你无法控制它对你的文本所做的更改。请不要使用此功能。 - devios1

Answer 3

对我来说最好的解决办法是

select {
    direction: rtl;
}

然后

option {
    direction: ltr;
}

再次说明，这并不会改变屏幕阅读器中的文本读取方式，也不会存在任何格式问题。

- Martin Schilliger

---

刚刚发现IE6-8（不确定IE8+）无法正确渲染这个…… :-/ - Martin Schilliger

而且在Firefox中，这并不正确地工作。似乎只有在Webkit中是一个好主意... - Martin Schilliger

如果您的选项HTML包含（），那么它将把）移到行的开头（在最左边的第一个字符之前）。> _ < - rm-

然而，在Firefox上，当前（选定的）值显示为左侧带有“AM”（“AM 9:30”）。 - Mark Schneider

尽管这个代码可以将所有内容移动到右侧并将选项放在左侧，但在我的情况下它会使箭头位置在左侧。 - Anthony Kal

Answer 4

我认为你想要的是：

select {
  direction: rtl;
}

这里有一个fiddle示例： http://jsfiddle.net/neilheinrich/XS3yQ/

- nheinrich

---

不错，但箭头现在向左。如果我们想要文本和选取箭头都靠右对齐怎么办？ - Baptiste

Answer 5

我曾经面临同样的问题，需要将选择的占位符值对齐到选择框的右侧，并需要将选项对齐到右侧，但是当我使用 direction: rtl; 来选择并给选择框应用一些右填充时，所有选项也会因为填充而向右移动，而我只想将填充应用于所选的占位符。

我通过以下样式解决了这个问题:

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

select option{
  direction: rtl;
}

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

- Ashish Sharma