如何更改选择框'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;
}

你可以覆盖它。

Answer 4

您可以仅使用css设置选择框的样式，它需要一种解决方法：

首先，用div包围它并给它一个类：

<div class="selectStyle">
    <select>
        <option>First Option</option>
        <option>Second Option</option>
    </select>
</div>

然后确保使用css以某种方式设置选择元素的样式：

.selectStyle select {
   background: transparent;
   width: 250px;
   padding: 4px;
   font-size: 1em;
   border: 1px solid #ddd;
   height: 25px;
}

你设计div：

.selectStyle {
   width: 235px;
   height: 25px;
   overflow: hidden;
   background: url(yourArrow.png) no-repeat right #ccc;
}

Answer 5

对于使用样式化optgroup来避免问题的不同方法，我建议使用禁用选项。

<option disabled>[group label]</option>

你可以通过例如

拍摄风格

<style> [disabled] { color:#000; background-color:#CCC } </style>

Answer 6

<style>
.select2-container--bootstrap .select2-results__group {
    color: inherit;
    font-size: inherit;
    font-weight:bold;
    padding: 6px 4px;
}

Answer 7

您只能为Firefox设置<optgroup>标签的样式，如下所示

optgroup[label] {
   color: grey;
   font-style: inherit;
   font-weight: 300;
   text-shadow: none
}

Answer 8

.select2-results__group{
  /* put your style here */
}