样式选项组标签

Question

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

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

Answer 1

使用属性选择器

[label]
{
color: red;
}

修改

<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;
}

Answer 2

我知道这个帖子有点老了，但万一有人偶然发现它，因为我... 已经提到，在为optgroup标签设置样式时，它会为整个组设置样式。这是事实，但是如果您单独设置选项标签的样式，则optgroup格式将保留为样式中的设置，但是作为optgroup子项的选项的样式格式将覆盖当没有样式时继承的optgroup格式。为选项设置。

因此，为optgroup设置以下css样式会在灰色背景上显示红色文字。

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

如果没有其他操作，您的整个列表将是灰色背景上的红色文本。但是，如下所示设置选项样式会使optgroup标签的样式保持红色为灰色，但该组下的选项将为黑色。

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

Answer 3

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

或

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

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

Answer 4

按照建议使用[label] attribute selector 基本上无关紧要。您无法将样式应用于HTML属性。它只是一个过滤掉optgroup元素的修饰符。如果您的所有optgroup都有label，那么无论如何您都会选择它们，如果有些人没有label，那么他们只会选择退出该风格：

＆＃13;

＆＃13;

optgroup[label]{
  color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<select>代码存在其他复杂表单控件的问题，例如<file>。原始规格假定它取决于浏览器如何显示它（事实上，它通常是由底层库提供的内置GUI控件）并且不提供全面的方式来设置它。只需看看W3C HTML 4.01 Specification中的这个屏幕截图：

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

• <optgroup>是一个包含子<option> s
的块
• 标签实际上没有自己的节点

此代码段更清晰：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以你所能做的就是将样式应用到<optgroup>（理解你不能将标签与其他项目区分开来），然后根据子选项的需要覆盖它们。