使用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:
从列表中选择许多(组不可选):
option 1
group 1
option 2
group 2
option 3
option 4
option 5
从列表中选择一个(组不可选):
option 1
group 1
option 2
group 2
option 3
option 4
option 5
从树中选择一个(可选择组):
option 1
group 1
option 2
group 2
option 3
option 4
option 5
只有IE9(你必须为msie提供doctype)…
我认为你不能没有“级别x”的CSS类,因为嵌套divs的填充将会抵消标签的彩色背景太…
通过IE8-你必须使用javascript来着色标签…