web-dev-qa-db-fra.com

Comment changer le style d'une étiquette de groupe optgroup

J'ai une boîte de sélection simple avec un groupe d'options dans mon application.

<select>
   <optgroup label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
 </optgroup>
  ----
  ----
  ----
</select>

Quand il est affiché dans le navigateur, l’étiquette du groupe d’options est affichée en gras et en italique; Je veux qu'il soit affiché sans aucun de ces styles.

htmlcssstyling
12
Gnanz

Malheureusement, les cases à cocher sont l’une des rares choses auxquelles vous pouvez ajouter très peu de style avec CSS. Vous êtes généralement limité à la manière dont le navigateur le rend.

Par exemple, cela ressemble à ceci en chrome:

enter image description here

Et ceci dans Firefox:

enter image description here

13
wesbos

Sur la plupart des navigateurs (testés sur les derniers IE et FF), vous pouvez facilement modifier le libellé de l'optgroup avec CSS uniquement:

    select optgroup{
    background:#000;
    color:#fff;
    font-style:normal;
    font-weight:normal;
    }

De toute évidence, vous pouvez définir n’importe quel nom de classe au lieu de la balise HTML sélectionnée.

En passant, comme d'autres réponses l'ont dit, il reste peu d'options CSS à utiliser avec les zones de sélection et de nombreux webmasters les remplacent à l'aide de la méthode indiquée par l'utilisateur949847. Mais ce code ci-dessus devrait suffire à répondre à vos besoins.

13
Helrik

Firefox style le label en utilisant cette règle:

optgroup:before {
    content: attr(label);
    display: block;
}

Vous pouvez le remplacer.

7
nniico
<style>
.select2-container--bootstrap .select2-results__group {
    color: inherit;
    font-size: inherit;
    font-weight:bold;
    padding: 6px 4px;
}

0
Mauro Trevisan

Pour une approche différente afin de contourner les problèmes de styling optgroups, je suggère d’utiliser des options désactivées.

<option disabled>[group label]</option>

vous pouvez avoir une chance de le coiffer via, par exemple.

<style> [disabled] { color:#000; background-color:#CCC } </style>
0
Risingson

Vous pouvez styler une boîte de sélection en utilisant seulement CSS, cela nécessite une sorte de travail autour de:

Tout d’abord, vous l’entourez d’une div et donnez-lui une classe:

<div class="selectStyle">
    <select>
        <option>First Option</option>
        <option>Second Option</option>
    </select>
</div>

Ensuite, assurez-vous que les éléments sélectionnés sont stylés d’une certaine manière en utilisant css:

.selectStyle select {
   background: transparent;
   width: 250px;
   padding: 4px;
   font-size: 1em;
   border: 1px solid #ddd;
   height: 25px;
}

Et vous dénommez la div:

.selectStyle {
   width: 235px;
   height: 25px;
   overflow: hidden;
   background: url(yourArrow.png) no-repeat right #ccc;
}
0
user949847