5

编辑使其不重复：

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

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

我正在尝试在 css 中创建一个树样式的选择框。据我所知，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包括

我想通过 css 执行此操作的原因是因为客户端希望限制页面上的 javascript，并且我希望能够使用键盘跳转到一个选项。

任何帮助使其正常工作或深入了解它为什么不工作的原因将不胜感激。

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

4

1 回答 1

0

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

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

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

于 2013-08-11T15:54:16.547 回答