html - 选项标签的内容属性不起作用

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?

I am attempting to create a tree-style select box in css. From what I have been able to find, the :before tag is supported in IE8+ along with the content property. With that being said, I can get the code render as expected in Firefox(23.0), but I cannot get it to render in IE(10) or 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 个中工作)。所以 - 因为这里还没有答案 - 这是我的新问题:有没有非js的解决方案可以实现键盘跳转和select/option元素的树形结构显示？

Answer 1

你为什么不用optgroup？这不是选择中的嵌套选项吗？

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

我不知道键盘跳转，但至少您只需使用 JavaScript 进行跳转，而不用创建列表。 HTML5 提供了标签，因此在尝试重新创建轮子之前，您应该使用像 optgroup 这样的原生标签。