Question

编辑为不重复：

Is there a non-js solution that allows keyboard jumps 
and a tree structure display for the select/option element?

Simple &\nbsp; work in both Firefox(23) and Chrome(28), is there a better solution?

我正在尝试在css中创建一个树型选择框。从我能够find开始，IE8 +支持:before标记以及content属性。话虽如此，我可以在Firefox（23.0）中按预期获得代码渲染，但我无法在IE（10）或Chrome（28）中进行渲染。

HTML

<select>
    <option class="level0">All</option>
    <option class="level1">Domestic</option>
    <option class="level2">Alabama</option>
    <option class="level1">Foreign</option>
    <option class="level2">Argentina</option>
</select>

CSS

.level0:before {
    content:none;
}
.level1:before {
    content:"-";
}
.level2:before {
    content:"--";
}

jsfiddle included

我想通过css这样做的原因是因为客户想要限制页面上的javascript，我希望能够通过键盘跳转到一个选项。

任何有助于使其发挥作用或帮助解决其不起作用的帮助将不胜感激。

* 编辑： *阅读评论中的回复（这些回答与解释原因not possible的答案一样好）。我决定在纯HTML中使用 个字符来获得所需的效果。这允许Firefox和Chrome中的键盘跳转（尽管我仍然没有找到一个非JS解决方案来让它在所有3中工作）。所以 - 既然这里没有答案 - 这是我的新问题：是否存在允许键盘跳转和select / option元素的树结构显示的非js解决方案？

Answer 1

为什么不使用optgroup？选择不是那个嵌套选项吗？

http://www.w3.org/html/wg/drafts/html/master/forms.html#the-optgroup-element

我不知道键盘跳转，但至少你只需要使用JavaScript进行跳转而不是创建列表。 HTML5提供了标记，因此在尝试重新创建方向盘之前，您应该使用像optgroup这样的本地内容。

选项标记的内容属性不起作用

1 个答案: