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

Question

Можно ли стилизовать только метку optgroup в раскрывающемся списке?

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

Answer 1

Использовать атрибут 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;
}

Answer 2

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

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

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] , как предлагается везде , в основном не имеет значения .Вы не можете применять стили к атрибутам 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>

Тег <select> имеет проблему с другими элементами управления сложной формой, такими как <file>.В оригинальных спецификациях предполагалось, что браузер будет решать, как его отображать (на самом деле это обычно был встроенный элемент управления с графическим интерфейсом, предоставляемый базовой библиотекой), и не предоставлял исчерпывающих средств для его стилизации.Просто посмотрите на этот снимок экрана, приведенный в спецификации W3C HTML 4.01 :

Возвращаясь к нашей проблеме, необходимо учитывать два факта:

• <optgroup> - это блок, включающий дочерний элемент <option> s
• На самом деле метка не имеет собственного узла

Этот фрагмент делает его более понятным:

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>

Таким образом, все, что вы можете сделать, это применить стили к <optgroup> (понимая, что вы не можете отличить метку от остальных элементов), а затем перезаписатьих по мере необходимости для дочерних вариантов.