web-dev-qa-db-fra.com

Comment styliser l'élément option d'une balise select?

J'essaie de définir le style d'une option dans un menu déroulant select dans Google Chrome. Cela fonctionne dans tous les navigateurs sauf IE9 et Chrome.

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}
<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Sans utiliser JavaScript, existe-t-il un moyen de définir le style des options dans Google Chrome? Une fois sélectionnée, la couleur d'arrière-plan ne s'affiche pas.

cssgoogle-chromehtml-select
43
Mike

Malheureusement, les navigateurs WebKit ne prennent pas encore en charge le style des balises <option>, à l'exception de color et background-color.

La solution multi-navigateurs la plus répandue consiste à utiliser <ul>/<li> et à les styler à l'aide de CSS. Les cadres tels que Bootstrap le font bien.

24
Tushar Roy

C'est un choix (parmi les devs de navigateur ou le W3C, je ne trouve aucune spécification du W3C concernant les options de sélection de style), mais ne permet pas de sélectionner les options de style.

Je soupçonne que ce serait pour rester cohérent avec les listes de choix autochtones.
(pensez aux appareils mobiles par exemple).

3 solutions me viennent à l'esprit:

  • Utilisez Select2 qui convertit vos sélections en uls (autorisant beaucoup de choses)
  • Divisez votre selects en plusieurs afin de regrouper les valeurs
  • Divisé en optgroup
11
Pierre de LESPINAY

Les futures versions de Chrome (49+) prendront désormais en charge le style des éléments <option> avec font-weight. Source: https://code.google.com/p/chromium/issues/detail?id=44917#c22

Nouvelle fenêtre contextuelle SELECT: le style de police de caractères doit être appliqué.

Cette CL supprime themeChromiumSkia.css. |!important| dans il empêché de appliquer font-weight. Maintenant, html.css a |font-weight:normal| et |!important| devrait être inutile.

Il y avait une feuille de style Chrome, themeChromiumSkia.css, qui utilisait font-weight: normal !important; dans tout ce temps. Il devrait figurer dans le canal Chrome stable de la version 49.0.

2
TylerH

En fait, j'ai récemment découvert quelque chose qui semble fonctionner pour le style d'éléments <option></option> individuels dans Chrome, Firefox et IE à l'aide de CSS pur.

Peut-être, essayez ce qui suit:

HTML:

<select>
    <option value="blank">Blank</option>
    <option class="white" value="white">White</option>
    <option class="red" value="red">Red</option>
    <option class="blue" value="blue">Blue</option>
</select>

CSS:

select {
    background-color:#000;
    color: #FFF;
}

select * {
    background-color:#000;
    color:#FFF;
}

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */
    background-color:#F00;
    color:#FFF;
}

select *.white {
    background-color:#FFF;
    color:#000;
}

select *.blue {
    background-color:#06F;
    color:#FFF;
}

Étrange ce que jette la prudence au vent. Il ne semble pas supporter le :active :hover :focus :link :visited :after :before, cependant.

Exemple sur JSFiddle: http://jsfiddle.net/Xd7TJ/2/

2
LeoV117

J'ai une solution de contournement en utilisant jquery ... bien que nous ne puissions pas styler une option particulière, nous pouvons styler la sélection elle-même - et utiliser javascript pour changer la classe de la sélection en fonction de ce qui est sélectionné. Cela fonctionne suffisamment pour les cas simples.

$('select.potentially_red').on('change', function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});
$('select.potentially_red').each( function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});
.option_red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- The js will affect all selects which have the class 'potentially_red' -->
<select name="color" class="potentially_red">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Notez que le js est en deux parties, la partie each pour tout initialiser correctement sur la page, la partie .on('change', ... pour répondre aux modifications. Je suis incapable de transformer le js en une fonction pour le DRY, il le casse pour une raison quelconque

1
xxjjnn