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

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

传统浏览器 不允许您设置所选元素的样式 (在不同的平台上,尤其是手机上,它看起来明显不同)。

在里面 Sciter 你可以设计 <select> 单独作为选择组件的部分是正常的DOM元素:

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

由于Sciter专门为桌面UI和 <选择> 造型是必须的。

作为普通网页的解决方案,我建议使用 <选择> 替代品,如 http://getbootstrap.com/components/#btn-dropdowns

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

.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>