html - 如何在选择输入中表示分层数据？

Question

我不是问如何生成它，而是问如何格式化它。是否有任何一组字符用于该目的？我的直觉方法是让选项具有以下值:

master
    |-- foo 1
    |-- foo 2
        |-- bar 1

Answer 1

如果你想用一个选择元素来完成它并且你不需要超过两个级别，那么你可以使用 optgroup .

CSS 样式是有限的。据我所知，对于 select 本身，您可以更改 color、background、border、字体，文本对齐。

对于 optgroup 和 option，您可以更改...嗯，同样的事情。您还可以使用 [selected] {/*styles*/> 为所选选项设置不同的样式。您不能更改 padding 或 margin...之类的东西。尝试嵌套 optgroup 也不起作用。

您可以做什么:您可以为不同的 optgroup 和 option 设置不同的样式(使用类、nth-child、属性选择器)。

Demo

如果您需要很多级别，那么使用嵌套列表也许会更好。

<ul>
    <li>master
        <ul>
            <li>foo 1</li>
            <li>foo 2
                <ul>
                    <li>bar 1</li>
                </ul>
            </li>    
        </ul>
    </li>
</ul>