HTML中的树状选择

我正在尝试创建一个树状< select>使用 HTML和CSS.

为了保持可访问性,我想尽可能避免javascript.
我也想避免使用& nbsp;而不是填充,因为这样可以防止按下字母键跳转到项目.

我到目前为止是这样的：

<select>
    <optgroup label="fluffy" style="padding-left: 10px;"></optgroup>
        <optgroup label="kitties" style="padding-left: 20px;"></optgroup>
            <option value="1" style="padding-left: 30px;">Fluffykins</option>
            <option value="2" style="padding-left: 30px;">Mr Pooky</option>
        <optgroup label="puppies" style="padding-left: 20px;"></optgroup>
            <option value="3" style="padding-left: 30px;">Doggins</option>

    <optgroup label="not fluffy" style="padding-left: 10px;"></optgroup>
        <optgroup label="snakes" style="padding-left: 20px;"></optgroup>
            <option value="4" style="padding-left: 30px;">Fingers</option>
        <optgroup label="crabs" style="padding-left: 20px;"></optgroup>
            <option value="5" style="padding-left: 30px;">Lucky (AKA Citizen Snips)</option>
</select>

这在Firefox中工作正常,但IE忽略了填充,将其呈现为平面列表(很难使用),Chrome不会呈现< optgroup> s,这在< optgroup>中在技术上是无效的.应至少包含< option>.

不幸的是,< optgroup> s不能嵌套.

This is how Firefox renders it

解决方法

使用SELECT元素将不起作用.您可以基于此创建自定义SELECT：

CSS：

* {
        margin: 0;
        padding: 0;
    }

    .select,.select-tree {
        border: 1px solid black;
        width: 200px;
        overflow: hidden;
        list-style-type: none;
        margin: 10px;
    }

    .select .group-label {
        background-color: white;
    }

    .select .option-label {
        background-color: white;
        display: block;
    }

    .select .hidden-checkBox {
        display: none;
    }

    .select .hidden-checkBox:checked + .option-label,.select-tree .hidden-checkBox:checked ~ .group-children,.select-tree .hidden-checkBox:checked ~ .group-children * {
        background-color: lightblue;
    }

    .select-tree .group-children {
        list-style-type: none;
        padding-left: 20px;
    }
    .select-tree .option-label {
        padding-left: 5px;
    }

    .select-list .level-0 {
        padding-left: 10px;
    }

    .select-list .level-1 {
        padding-left: 20px;
    }

    .select-list .level-2 {
        padding-left: 30px;
    }

HTML：

从列表中选择许多(组不可选)：

<ol class="select select-list select-many">
    <li>
        <input name="list1[1]" type="checkBox" id="check1" class="hidden-checkBox"/>
        <label for="check1" class="option-label level-0">option 1</label>
    </li>
    <li>
        <span class="group-label level-0">group 1</span>
    </li>
    <li>
        <input name="list1[2]" type="checkBox" id="check2" class="hidden-checkBox"/>
        <label for="check2" class="option-label level-1">option 2</label>
    </li>
    <li>
        <span class="group-label level-1">group 2</span>
    </li>
    <li>
        <input name="list1[3]" type="checkBox" id="check3" class="hidden-checkBox"/>
        <label for="check3" class="option-label level-2">option 3</label>
    </li>
    <li>
        <input name="list1[4]" type="checkBox" id="check4" class="hidden-checkBox"/>
        <label for="check4" class="option-label level-2">option 4</label>
    </li>
    <li>
        <input name="list1[5]" type="checkBox" id="check5" class="hidden-checkBox"/>
        <label for="check5" class="option-label level-0">option 5</label>
    </li>
</ol>

从列表中选择一个(组不可选)：

<ol class="select select-list select-one">
    <li>
        <input name="list2" type="radio" id="check6" class="hidden-checkBox"/>
        <label for="check6" class="option-label level-0">option 1</label>
    </li>
    <li>
        <span class="group-label level-0">group 1</span>
    </li>
    <li>
        <input name="list2" type="radio" id="check7" class="hidden-checkBox"/>
        <label for="check7" class="option-label level-1">option 2</label>
    </li>
    <li>
        <span class="group-label level-1">group 2</span>
    </li>
    <li>
        <input name="list2" type="radio" id="check8" class="hidden-checkBox"/>
        <label for="check8" class="option-label level-2">option 3</label>
    </li>
    <li>
        <input name="list2" type="radio" id="check9" class="hidden-checkBox"/>
        <label for="check9" class="option-label level-2">option 4</label>
    </li>
    <li>
        <input name="list2" type="radio" id="check10" class="hidden-checkBox"/>
        <label for="check10" class="option-label level-0">option 5</label>
    </li>
</ol>

从树中选择一个(可选择组)：

<ol class="select select-tree select-one">
    <li>
        <input name="tree1" type="radio" id="check11" class="hidden-checkBox"/>
        <label for="check11" class="option-label">option 1</label>
    </li>
    <li>
        <input name="tree1" type="radio" id="check12" class="hidden-checkBox"/>
        <label for="check12" class="option-label group-label">group 1</label>
        <ol class="group-children">
            <li>
                <input name="tree1" type="radio" id="check13" class="hidden-checkBox"/>
                <label for="check13" class="option-label">option 2</label>
            </li>
            <li>
                <input name="tree1" type="radio" id="check14" class="hidden-checkBox"/>
                <label for="check14" class="option-label group-label">group 2</label>
                <ol class="group-children">
                    <li>
                        <input name="tree1" type="radio" id="check15" class="hidden-checkBox"/>
                        <label for="check15" class="option-label">option 3</label>
                    </li>
                    <li>
                        <input name="tree1" type="radio" id="check16" class="hidden-checkBox"/>
                        <label for="check16" class="option-label">option 4</label>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        <input name="tree1" type="radio" id="check17" class="hidden-checkBox"/>
        <label for="check17" class="option-label">option 5</label>
    </li>
</ol>

只有IE9(你必须为msie提供doctype)…
我认为你不能没有“级别x”的CSS类,因为嵌套divs的填充将会抵消标签的彩色背景太…

通过IE8-你必须使用javascript来着色标签…

原文地址：https://www.jb51.cc/html/230309.html