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

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

Dunno，如果这适合你，只适用于Firefox。但我认为你的例子只适用于Firefox，所以试试这个：

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

fiddle