HTML 选择和选项混合方向 (ltr & rtl)

Question

我有一个要向右对齐的选择框，但我想保持选项下拉菜单向左对齐。像这样：

<select>
  <option>item</option>
</select>

还有 CSS：

select { direction: rtl; }
option { direction: ltr; }

但是设置选择标签的方向也会设置选择下拉菜单的方向。见here

这甚至可能吗？我知道作为替代方案，我可以使用 js 构建自定义选择功能，但如果可以的话，我想保持简单。

Answer 1

direction: rtl; 不完全是文本对齐。或者准确地说，文本对齐是方向的副作用。请注意，方向也会影响设置中下拉箭头的位置。

传统浏览器不允许您设置选择元素的样式（它在不同平台上看起来有很大不同，尤其是在移动设备上）。

在Sciter 中，您可以单独设置<select> 部分的样式，因为选择组件是那里的普通DOM 元素：

select > caption { text-align:right; } 
select > button { ... } 
select > popup > option { text-align:left; } 

Sciter 是专为桌面 UI 设计的，而 <select> 样式是必须的。

作为纯网页的解决方案，我建议使用 <select> 替代品，例如 http://getbootstrap.com/components/#btn-dropdowns

Answer 2

你的小提琴的问题是你使用

.1 {
    direction: ltr;
}

但是，标识符不能以数字开头。因此，.1 是一个错误的选择器。你应该逃避它：.\000031。

那么，如果你使用...

.\000031 {
    direction: ltr;
}

...它可以随心所欲，至少在 Firefox 37 上是这样。

请注意，其他浏览器可能不允许您设置 select 元素的样式。

#ex-1 {
    direction: rtl;
    width: 120px;
}
.\000031 {
    direction: ltr;
}

<select id="ex-1">
    <option class='1'>item one</option>
    <option class='1'>item two</option>
    <option class='1'>item three</option>
</select>