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

【问题标题】：text-align: right on <select> or <option>文本对齐：在 <select> 或 <option> 上右对齐
【发布时间】：2011-12-16 18:24:21
【问题描述】：

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

我都试过了：

select { text-align: right } 和 option { text-align: right }，但似乎都不能在 WebKit（Chrome、Safari 或 Mobile Safari）中工作。

感谢您的帮助！

【问题讨论】：

option {text-align: right;} 不起作用有一个非常愚蠢的原因。

标签： html css webkit

【解决方案1】：

我想你想要的是：

select {
  direction: rtl;
}

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

【讨论】：

很酷，但箭头会向左移动。如果我们希望文本和选择箭头都向右对齐怎么办？

【解决方案2】：

您可以尝试使用“dir”属性，但我不确定这会产生预期的效果吗？

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

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

【讨论】：

其实，这很完美。无论如何，我一直在使用appearance: none; 属性，所以下拉菜单的位置无关紧要。谢谢！
这并不适用于所有情况：产生 " x 42"23。 rtl 还会改变它在屏幕阅读器中的阅读方式。
不考虑在某些特殊情况下如何处理它，只是为了给它正确的外观，这看起来不是一个肮脏的黑客吗？
恕我直言，这很糟糕，原因有两个。 1. 语义错误。 2. 在 Chrome 30 中，dir="rtl" 将指示下拉菜单的箭头向左移动。
这是一个可怕的想法，伙计们。 RTL 适用于以从右到左的顺序绘制字符的语言，如果该内容是用 LTR 语言编写的，那么您在这样的选项中放入的内容会非常糟糕。例如，像“2017 年 8 月 10 日”这样的日期将绘制为“2017 年 8 月 10 日”。您无法控制它对您的文本的作用。不要使用这个。

【解决方案3】：

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

select {
    direction: rtl;
}

然后

option {
    direction: ltr;
}

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

【讨论】：

刚刚发现 IE6-8（不知道 IE8+）不能正确渲染... :-/
而且在 Firefox 中这也不能正常工作。似乎只在 Webkit 中是个好主意……
如果您的选项 html 包含 () ，则会将 ) 移动到行首（在左边的第一个字符之前）。 >_
如果您将“( )”粘贴为 &#40; 和 &#41;?
但是，在 Firefox 上，当前（选定的）值在左侧显示为“AM”（“AM 9:30”）。

【解决方案4】：

以下 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 - 这太棒了！我希望你会得到更多的支持。
@Ryan，我已经编辑了我的答案。现在适用于下拉列表中的选择和选项值。让我知道它是否适合你
很遗憾，这不起作用。 <option>.1</option><option>1</option><option>10</option> 给出右对齐的 1. 和 1 和 10（点反转）jsfiddle.net/c2gka8o0
如果您删除 direction: rtl; 位，我将对此表示赞同。这是一个 hack，绝对不应该使用。
警告，direction: rtl; 告诉 CSS 这是一种从右到左的语言（如希伯来语）。这将我的文本从“11 AM”反转为“AM 11”。

【解决方案5】：

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

我已经通过以下样式解决了这个问题：

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

select option{
  direction: rtl;
}

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

【讨论】：