我有以下DOM:
<select>
<optgroup label="a">
<option class="foo">1</option>
<option>2</option>
<option>3</option>
</optgroup>
<optgroup label="b">
<option>1</option>
<option>2</option>
<option>3</option>
</optgroup>
</select>
我要做的是在
optgroup
的标签下划线,而不是option
的标签。所以我写了这个CSS:
optgroup {
text-align: left;
color: #222;
text-decoration: underline;
}
optgroup option {
color: red;
text-decoration: none;
}
optgroup option.foo {
color: green;
text-decoration: none;
}
我得到以下输出(从JSFiddle):
我错过了删除该选项下划线的内容吗?
我正在使用Firefox 17。
最佳答案
Dunno,如果这适合您并且仅在Firefox中工作。但我认为您的示例仅适用于Firefox,请尝试以下操作:
optgroup::before{
content: attr(label);
border-bottom:solid 1px #000;
width:10px;
}
fiddle