代码之家 › 专栏 › 技术社区 › Kyle Shike

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

direction html-select css html

6

Kyle Shike · 技术社区 · 10 年前

我有一个选择框,我想向右对齐,但我想保持选项下拉列表向左对齐。像这样:

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

以及CSS:

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

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

这是可能的吗?我知道,作为替代方案,我可以用js构建一个自定义选择功能,但如果可以的话,我希望保持简单。

2 回复 | 直到 10 年前

1

c-smile 10 年前

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

2

1

Oriol 10 年前

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

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