css - 如何删除下拉选项的下划线规则？

Question

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

Answer 1

不知道这是否适合您并且只适用于 Firefox。但我认为你的例子只适用于 firefox，所以试试这个:

    optgroup::before{
        content: attr(label);
        border-bottom:solid 1px #000;
        width:10px;
    }

fiddle