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

Question

编辑以使其不重复：

是否有允许键盘跳转的非js解决方案 
和选择/选项元素的树结构显示？

简单 &\nbsp; 在 Firefox(23) 和 Chrome(28) 中都可以使用，有没有更好的解决方案？

我正在尝试在 css 中创建一个树样式的选择框。从我已经能够找到，该:before标签在IE8 +与一起支持content财产。话虽如此，我可以在 Firefox(23.0) 中按预期渲染代码，但无法在 IE(10) 或 Chrome(28) 中渲染。

HTML

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

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

包含 jsfiddle

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

任何帮助它工作或深入了解它为什么不起作用的帮助将不胜感激。

*编辑： *在阅读评论中的回复后（与解释为什么这是不可能的答案一样好）。我决定使用 纯 html 中的字符来获得所需的效果。这允许 Firefox 和 Chrome 中的键盘跳转（尽管我仍然没有找到一个非 JS 解决方案来让它在所有 3 个中工作）。所以 - 由于这里还没有答案 - 这是我的新问题：是否有非 js 解决方案允许键盘跳转和选择/选项元素的树结构显示？

Answer 1

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

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

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