我正在尝试使用HTML和CSS创建一个类似树的<select>。
为了保持可访问性，我希望尽可能避免使用javascript。
我还想避免使用 而不是填充，因为这可以防止按下字母键跳转到项目。
到目前为止我所拥有的是：
<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>，这在技术上无效<optgroup> 1}}应至少包含<option>。
不幸的是<optgroup>无法嵌套。
答案 0 :(得分：5)
使用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）... 我认为如果没有“level-x”css类，你就无法做到这一点，因为通过嵌套div，填充也会偏移标签的彩色背景......
通过IE8-你必须使用javascript来为标签着色......
答案 1 :(得分：1)
正如您所指出的，您不能将一个OPTGROUP嵌套在另一个中。但你必须把它们包围起来。这将至少达到你尚未看到的缩进的基本水平。
<optgroup label="fluffy" style="padding-left: 10px;">
<optgroup label=" kitties" style="padding-left: 20px;">
<option value="1" style="padding-left: 30px;">Fluffykins</option>
<option value="2" style="padding-left: 30px;">Mr Pooky</option>
</optgroup>
<optgroup label=" puppies" style="padding-left: 20px;">
<option value="3" style="padding-left: 30px;">Doggins</option>
</optgroup>
</optgroup>
由于您无法使用键盘跳转到OPTGROUP标题（并且只能转到实际的OPTION），因此应该no problem padding the label out with 处理跨浏览器问题填充。
答案 2 :(得分：1)
我认为margin-left也不能做你想做的事情？
答案 3 :(得分：0)
您必须使用optgroup-Tags包装选项标签。
它应该是这样的：
<optgroup label="kitties" style="padding-left: 20px;">
<option value="1" style="padding-left: 30px;">Fluffykins</option>
<option value="2" style="padding-left: 30px;">Mr Pooky</option>
</optgroup>
<optgroup label="puppies" style="padding-left: 20px;">
<option value="3" style="padding-left: 30px;">Doggins</option>
</optgroup>
希望有所帮助：）
答案 4 :(得分：0)
这不是一个非常好的解决方案，但您是否尝试过将这些元素用于非破坏空格（＆amp; nbsp;）？