我有以下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

10-05 21:02
查看更多