Comment styler l’élément d’option d’une balise sélectionnée?

Malheureusement, les navigateurs WebKit ne prennent pas encore en charge le style des balises , sauf pour la color et la color background-color .

La solution multi-navigateur la plus répandue consiste à utiliser

/

et à leur donner un style avec CSS. Les frameworks comme Bootstrap le font bien.

C’est un choix (à partir des devs du navigateur ou du W3C, je ne trouve aucune spécification du W3C sur le choix des options de style), mais ne permet pas de définir des options de sélection.

Je soupçonne que ce serait pour garder la cohérence avec les listes de choix natives.
(pensez aux appareils mobiles par exemple).

3 solutions me viennent à l’esprit:

• Utilisez Select2 qui convertit réellement vos selects en ul s (permettant beaucoup de choses)
• Fractionner votre select en plusieurs afin de regrouper les valeurs
• Diviser en optgroup

En fait, j’ai découvert récemment quelque chose qui semble fonctionner pour styliser des éléments individuels dans Chrome, Firefox et IE à l’aide de CSS pur.

Peut-être, essayez ce qui suit:

HTML:

  Blank White Red Blue  

CSS:

 select { background-color:#000; color: #FFF; } select * { background-color:#000; color:#FFF; } select *.red { /* This, miraculously, styles the '' elements. */ background-color:#F00; color:#FFF; } select *.white { background-color:#FFF; color:#000; } select *.blue { background-color:#06F; color:#FFF; } 

Étrange ce que fait 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/

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

Nouveau SELECT Popup: le style de police doit être appliqué.

Ce CL supprime themeChromiumSkia.css. |!important| en elle empêché d’appliquer le 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 être dans le canal stable de Chrome par la version 49.0.

J’ai une solution de contournement en utilisant jquery … bien que nous ne puissions pas définir une option particulière, nous pouvons définir 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; } 

     Red White Blue Green