CSS 样式选项组标签

Styling option group label

提问by santa

Is it possible to style just the label of the optgroup in drop-down selector?

是否可以在下拉选择器中仅设置 optgroup 的标签样式？

<select>
    <optgroup label="Group Name">
        <option>My option</option>
    </optgroup>
</select>

回答by Jawad

Use attribute Selector

使用属性选择器

[label]
{
color: red;
}

EDIT

编辑

<select>
<optgroup label="Cars">
<option>Honda</option>
<option>Merc</option>
</optgroup>
<optgroup label="Bikes">
<option>Kawasaki</option>
<option>Yamaha</option>
</optgroup>
</select>


optgroup[label="Cars"]
{
color: red;
}

optgroup[label="Bikes"]
{
color: blue;
}

option
{
color: black;
}

回答by Dan Bemowski

I know that this thread is a bit old, but just in case someone stumbles on it as I have... It has been mentioned that when styling the optgroup tag that it styles the entire group. This is true, but if you style the option tag separately, the optgroup formatting will remain as set in the style, but the style formatting for the option which is a child of the optgroup will override the optgroup formatting that is inherited when no style is set for the option.

我知道这个线程有点旧，但以防万一有人像我一样偶然发现它......有人提到在为 optgroup 标记设置样式时，它会为整个组设置样式。这是真的，但如果单独设置选项标签的样式，选项组格式将保持在样式中的设置，但作为选项组子项的选项的样式格式将覆盖没有样式时继承的选项组格式为选项设置。

So, setting the following css style for optgroup will give you red text on a gray background.

因此，为 optgroup 设置以下 css 样式将为您提供灰色背景上的红色文本。

optgroup {
    background-color: gray;
    color: red;
}

If nothing else is done, your entire list will be red text on a gray background. However, also setting the option style as below will keep the optgroup labels styled red on gray, but the options under the group will be black on white.

如果什么都不做，您的整个列表将是灰色背景上的红色文本。但是，如下设置选项样式将使 optgroup 标签的样式保持为红底白字，但组下的选项将是白底黑字。

option {
    background-color: white;
    color: black;
}

回答by Steve Robbins

<style type="text/css">
    optgroup[label] {
        background: #FFFFFF;
    }
</style>

or

或者

<style type="text/css">
    optgroup[label="Group Name"] {
        background: #FFFFFF;
    }
</style>

if you want it to be label specific.

如果您希望它是特定于标签的。

回答by álvaro González

Using the [label]attribute selectoras suggested everywhere is mostly irrelevant. You cannot apply styles to HTML attributes. It's merely a modifier to filter out optgroupelements. If all your optgrouphave a labelthen you'll be selecting them all anyway and if some do not have labelthen they'll just opt-out from the style:

在[label]任何地方使用建议的属性选择器几乎是无关紧要的。您不能将样式应用于 HTML 属性。它只是过滤optgroup元素的修饰符。如果你optgroup有一个，label那么你无论如何都会选择它们，如果有些没有，label那么他们只会选择退出样式：

optgroup[label]{
  color: red;
}

<select size="8">
  <optgroup label="Cars">
    <option>Honda</option>
    <option>Merc</option>
  </optgroup>
  <optgroup>
    <option>Not label</option>
    <option>Not label either</option>
  </optgroup>
  <optgroup label="Bikes">
    <option>Kawasaki</option>
    <option>Yamaha</option>
  </optgroup>
</select>

The <select>tag has the problem of other complex form controls like <file>. Original specs assumed that it'd be up to the browser how to display it (in fact, it was typically a builtin GUI control provided by the underlying library) and don't provide comprehensive means to style it. Just look at this screen-shot found in the W3C HTML 4.01 Specification:

该<select>标签存在其他复杂表单控件的问题，如<file>. 原始规范假设浏览器如何显示它（实际上，它通常是由底层库提供的内置 GUI 控件），并且没有提供全面的方法来设置它的样式。只需查看W3C HTML 4.01 规范中的屏幕截图：

Back to our problem, there're two facts to take into account:

回到我们的问题，有两个事实需要考虑：

• The <optgroup>is a block that includes child <option>s
• The label does not really have a node of its own

• 该<optgroup>是包括孩子块<option>小号
• 标签实际上并没有自己的节点

This snippet makes it more clear:

这段代码更清楚：

optgroup{
  margin: 1em;
  border: 1px solid green;
}
optgroup option{
  margin: 1em;
  border: 1px solid orange;
}

<select size="13">
  <optgroup label="Cars">
    <option>Honda</option>
    <option>Merc</option>
  </optgroup>
  <optgroup label="Bikes">
    <option>Kawasaki</option>
    <option>Yamaha</option>
  </optgroup>
</select>

So all you can do is to apply styles to <optgroup>(understanding you can't tell the label apart from the rest of items) and then overwrite them as necessary for child options.

因此，您所能做的就是将样式应用于<optgroup>（理解您无法将标签与其余项目区分开来），然后根据需要为子选项覆盖它们。