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

Posted 2023-02-16

【中文标题】HTML 选择和选项混合方向 (ltr & rtl)

【英文标题】：HTML select and option mixed directions (ltr & rtl)

【发布时间】：2014-09-01 03:32:58

【问题描述】：

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

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

还有 CSS：

select  direction: rtl; 
option  direction: ltr; 

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

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

【问题讨论】：

你能发张图片说明你想要什么吗？

我更新了小提琴以更好地解释它。我希望所选选项右对齐，并且单击选择时出现的选项左对齐。

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

对。我举了一个简单的例子，应该进一步研究它，但正如你所看到的 here ，通过适当的 css 选择情况仍然存在。

同样的问题，好像是浏览器兼容性的问题***.com/questions/37787734/…

【参考方案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

【讨论】：

是的，我也得出了这个结论：使用精选的替代品，因为它们真的不难做到。

【参考方案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>

【讨论】：

有趣，但正如您所见here ，选择正确的 css 后问题仍然存在。除非不需要设置样式，否则我倾向于不使用 select's ... 一点 javascript 和一些 div，它可以很容易地完成并且具有更大的灵活性。