在大多数浏览器上（在最新的IE和FF上测试），您可以轻松地仅使用CSS更改optgroup的标签：

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

显然，您可以设置任何类名来代替select html标记。
顺便说一句，正如其他回答所说，仍然有很少的CSS选项与选择框一起使用，许多网站管理员使用user949847给出的方法覆盖它们。

不幸的是，选择框是少数几个你可以用CSS添加很少样式的东西之一，你通常受限于浏览器如何呈现它。
例如，它在chrome中如下所示：

在Firefox中是这样的：

Firefox使用以下规则设置标签样式：

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

你可以覆盖它。

你可以只使用css来设计一个选择框，这需要一些变通方法：
首先，用一个div将其包围起来，并给予它一个类：

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

然后确保select元素使用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;
}

为了避免样式化optgroups的问题，我建议使用禁用选项。

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

你可以通过例如来设计它。

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

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

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

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

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