如何更改选择框'optgroup标签的样式

Question

我的应用程序中有一个带有选项组的简单选择框.

<select>
   <optgroup label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
 </optgroup>
  ----
  ----
  ----
</select>

当它在浏览器中显示时,选项组标签以粗体和斜体显示; 我想让它显示没有任何这些风格.

Answer 1

不幸的是,选择框是少数可以用CSS添加很少风格的东西之一.您通常只能使用浏览器呈现它的方式.

例如,它在chrome中看起来像这样:

这在Firefox中:

Answer 2

在大多数浏览器上(在最新的IE和FF上测试),您只需使用CSS轻松更改optgroup的标签:

    select optgroup{
    background:#000;
    color:#fff;
    font-style:normal;
    font-weight:normal;
    }

显然,您可以设置任何类名而不是select html标记.

顺便说一句,正如其他答案所说,仍然很少有CSS选项可供选择框使用,许多网站管理员使用user949847给出的方法覆盖它们.但是上面的代码应该足以满足您的需求.

Answer 3

Firefox使用此规则设置标签:

optgroup:before {
    content: attr(label);
    display: block;
}

你可以覆盖它.