HTML中的树状选择

概述我正在尝试创建一个树状< select>使用 HTML和CSS. 为了保持可访问性,我想尽可能避免javascript. 我也想避免使用& nbsp;而不是填充,因为这样可以防止按下字母键跳转到项目. 我到目前为止是这样的： <select> <optgroup label="fluffy" style="padding-left: 10px;"></optgroup> < 我正在尝试创建一个树状< select>使用 HTML和CSS.

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

我到目前为止是这样的：

<select>    <optgroup label="fluffy" ></optgroup>        <optgroup label="kittIEs" ></optgroup>            <option value="1" >Fluffykins</option>            <option value="2" >Mr Pooky</option>        <optgroup label="puppIEs" ></optgroup>            <option value="3" >Doggins</option>    <optgroup label="not fluffy" ></optgroup>        <optgroup label="snakes" ></optgroup>            <option value="4" >Fingers</option>        <optgroup label="crabs" ></optgroup>            <option value="5" >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 >    <li>        <input name="List1[1]" type="checkBox" ID="check1" />        <label for="check1" >option 1</label>    </li>    <li>        <span >group 1</span>    </li>    <li>        <input name="List1[2]" type="checkBox" ID="check2" />        <label for="check2" >option 2</label>    </li>    <li>        <span >group 2</span>    </li>    <li>        <input name="List1[3]" type="checkBox" ID="check3" />        <label for="check3" >option 3</label>    </li>    <li>        <input name="List1[4]" type="checkBox" ID="check4" />        <label for="check4" >option 4</label>    </li>    <li>        <input name="List1[5]" type="checkBox" ID="check5" />        <label for="check5" >option 5</label>    </li></ol>

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

<ol >    <li>        <input name="List2" type="radio" ID="check6" />        <label for="check6" >option 1</label>    </li>    <li>        <span >group 1</span>    </li>    <li>        <input name="List2" type="radio" ID="check7" />        <label for="check7" >option 2</label>    </li>    <li>        <span >group 2</span>    </li>    <li>        <input name="List2" type="radio" ID="check8" />        <label for="check8" >option 3</label>    </li>    <li>        <input name="List2" type="radio" ID="check9" />        <label for="check9" >option 4</label>    </li>    <li>        <input name="List2" type="radio" ID="check10" />        <label for="check10" >option 5</label>    </li></ol>

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

<ol >    <li>        <input name="tree1" type="radio" ID="check11" />        <label for="check11" >option 1</label>    </li>    <li>        <input name="tree1" type="radio" ID="check12" />        <label for="check12" >group 1</label>        <ol >            <li>                <input name="tree1" type="radio" ID="check13" />                <label for="check13" >option 2</label>            </li>            <li>                <input name="tree1" type="radio" ID="check14" />                <label for="check14" >group 2</label>                <ol >                    <li>                        <input name="tree1" type="radio" ID="check15" />                        <label for="check15" >option 3</label>                    </li>                    <li>                        <input name="tree1" type="radio" ID="check16" />                        <label for="check16" >option 4</label>                    </li>                </ol>            </li>        </ol>    </li>    <li>        <input name="tree1" type="radio" ID="check17" />        <label for="check17" >option 5</label>    </li></ol>

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

通过ie8-你必须使用JavaScript来着色标签…

总结

以上是内存溢出为你收集整理的HTML中的树状选择全部内容，希望文章能够帮你解决HTML中的树状选择所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。