Style de groupe d'options de style

Est-il possible de style juste l'étiquette de la "optgroup" dans la liste déroulante le sélecteur?

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

source d'informationauteur santa

  1. 15

    L'utilisation de l'attribut Sélecteur de

    [label]
{
color: red;
}

    MODIFIER

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

    Je sais que ce thread est un peu vieux, mais juste au cas où quelqu'un trébuche sur elle comme je l'ai...
    Il a été mentionné que lorsque le style de la "optgroup" tag qu'il les styles de l'ensemble du groupe. C'est vrai, mais si vous le style de la balise d'option séparément, le "optgroup" mise en forme restera comme indiqué dans le style, mais le style de mise en forme pour l'option, qui est un enfant de la "optgroup" remplacera le "optgroup" mise en forme est héritée aucun style n'est défini pour l'option.

    Donc, la définition de la suite de style css pour "optgroup" va vous donner le texte en rouge sur un fond gris.

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

    Si rien d'autre n'est fait, l'intégralité de votre liste va être le texte en rouge sur un fond gris. Cependant, aussi la définition de l'option de style comme ci-dessous va garder le "optgroup" étiquettes de style en rouge sur fond gris, mais les options sous le groupe sera en noir sur blanc.

    option {
    background-color: white;
    color: black;
}
  3. 3
    <style type="text/css">
    optgroup[label] {
        background: #FFFFFF;
    }
</style>

    ou

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

    si vous voulez qu'il soit de l'étiquette spécifique.