Html 如何更改 <select> 的 <optgroup> 标签的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7452479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the style of a <select>'s <optgroup> label?
提问by Gnanz
I have a simple select box with an option group in my application.
我的应用程序中有一个带有选项组的简单选择框。
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
----
----
----
</select>
When it gets displayed in browser, the option group label is displayed in bold and italic; I want it to be displayed without any of those styles.
当它在浏览器中显示时，选项组标签以粗体和斜体显示；我希望它在没有任何这些样式的情况下显示。
采纳答案by wesbos
Unfortunately select boxes are one of the few things that you can add very little style to with CSS. You are usually limited to how the browser renders it.
不幸的是，选择框是少数可以使用 CSS 添加很少样式的东西之一。您通常仅限于浏览器如何呈现它。
For example, it looks like this in chrome:
例如，它在 chrome 中是这样的：
And this in Firefox:
这在 Firefox 中：
回答by Helrik
On most browsers (tested on latest IE and FF), you can easily change the optgroup's label with CSS only:
在大多数浏览器上（在最新的 IE 和 FF 上测试），您可以仅使用 CSS 轻松更改 optgroup 的标签：
select optgroup{
background:#000;
color:#fff;
font-style:normal;
font-weight:normal;
}
Obviously, you can set any classname instead of the select html tag.
显然，您可以设置任何类名而不是选择 html 标签。
By the way, as other answers said, there are still few CSS options to use with select boxes and many webmasters override them using the method given by user949847. But this code above should be sufficient to match your needs.
顺便说一句，正如其他答案所说，与选择框一起使用的 CSS 选项仍然很少，许多网站管理员使用 user949847 给出的方法覆盖它们。但是上面的这段代码应该足以满足您的需求。
回答by nniico
Firefox style the label using this rule :
Firefox 使用以下规则设置标签样式：
optgroup:before {
content: attr(label);
display: block;
}
You can override it.
你可以覆盖它。
回答by Risingson
For a different approach to circumvent the problems with styling optgroups i suggest using disabled options.
对于绕过样式选项组问题的不同方法，我建议使用禁用选项。
<option disabled>[group label]</option>
you can have a shot on styling it via eg.
您可以通过例如对其进行造型。
<style> [disabled] { color:#000; background-color:#CCC } </style>
回答by Mauro Trevisan
<style>
.select2-container--bootstrap .select2-results__group {
color: inherit;
font-size: inherit;
font-weight:bold;
padding: 6px 4px;
}
回答by Alexander Schmidt
You can style the <optgroup>label only for Firefox like following
您<optgroup>只能为 Firefox设置标签样式，如下所示
optgroup[label] {
color: grey;
font-style: inherit;
font-weight: 300;
text-shadow: none
}
回答by Alexander Schmidt
You can style a select box using only css, it requires a sort of work around:
您可以仅使用 css 设置选择框的样式，它需要一种解决方法：
First, you surround it with a div and give that a class:
首先，你用一个 div 包围它并给它一个类：
<div class="selectStyle">
<select>
<option>First Option</option>
<option>Second Option</option>
</select>
</div>
Then you make sure the select elements are styled a certain way using css:
然后确保使用 css 以某种方式对 select 元素进行样式设置：
.selectStyle select {
background: transparent;
width: 250px;
padding: 4px;
font-size: 1em;
border: 1px solid #ddd;
height: 25px;
}
And you style the div:
然后你设置 div 的样式：
.selectStyle {
width: 235px;
height: 25px;
overflow: hidden;
background: url(yourArrow.png) no-repeat right #ccc;
}
