混合方向 (从左到右和从右到左) 的HTML选择和选项

Question

混合方向 (从左到右和从右到左) 的HTML选择和选项

7

我有一个选择框，我想让它靠右对齐，但是我想保持选项下拉菜单向左对齐。就像这样：

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

以下是CSS代码：

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

但是设置选择标记的方向也会设置选择下拉菜单的方向。请参见这里

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

- Kyle Shike

1

你能发布一张图片并标明你想要的内容吗？ - Nivas

我更新了这个示例，希望能更好地解释它。我想要选定的选项右对齐，并且在点击选择后出现的选项左对齐。 - Kyle Shike

标识符不能以数字开头。因此，.1 是错误的选择器。您应该对其进行转义：.\000031。 - Oriol

好的。我快速制作了一个示例，本应该进一步查看它，但是正如您可以在这里看到的那样，通过正确的CSS选择器，情况仍然存在。 - Kyle Shike

同样的问题，看起来这是浏览器兼容性的问题。 - Luca Black

2个回答

1

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。

- c-smile

是的，我也得出了这个结论：使用选择替代方案，因为它们并不难制作。 - Kyle Shike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

您的代码存在问题，原因是您使用了。

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