Question

我有一个我希望与右边对齐的选择框，但我想保持选项下拉对齐到左边。像这样：

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

CSS：

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

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

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

Answer 1

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

传统浏览器不允许您设置选择元素（它在不同平台上看起来有很大差异，尤其是手机）。

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

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

我已经成功实现了Sciter专为桌面用户界面设计，<select>造型是必须的。

作为普通网页的解决方案，我建议使用<select>替换{{1}}

Answer 2

小提琴的问题在于你使用

.1 {
    direction: ltr;
}

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

然后，如果你使用......

.\000031 {
    direction: ltr;
}

...它可以按你的需要工作，至少在Firefox 37上。

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

＆＃13;

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

＆＃13;

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

＆＃13;

HTML选择和选项混合方向（ltr＆amp; rtl）

2 个答案: