Метка группы параметров стилизации

Ответ 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;
}

Ответ 2

Я знаю, что эта нить немного устарела, но на всякий случай кто-то наткнулся на нее, как я... Было упомянуто, что при стилизации тега optgroup, который он создает всю группу. Это верно, но если вы настроите тег опции отдельно, форматирование optgroup останется таким же, как установлено в стиле, но форматирование стиля для опции, которая является дочерним элементом optgroup, переопределит форматирование optgroup, которое наследуется, когда ни один стиль не является для опции.

Итак, установка следующего стиля css для optgroup даст вам красный текст на сером фоне.

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

Если ничего не сделано, весь ваш список будет красным цветом на сером фоне. Тем не менее, установка стиля опций, как показано ниже, приведет к тому, что метки optgroup будут красными на сером, но опции под группой будут черными на белом фоне.

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

Ответ 3

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

или

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

если вы хотите, чтобы это была метка.

Ответ 4

Использование [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>