Comment styliser les options de l'élément HTML "select" ?

Question

Voici mon code HTML :

<select id="ddlProducts" name="ddProducts">
    <option>Produit 1 : Produits électroniques</option>
    <option>Produit 2 : articles de sport</option>
</select>

Je souhaite mettre en gras les noms de produits (c'est-à-dire « Produit 1 », « Produit 2 », etc.) et mettre en italique leurs catégories (c'est-à-dire électronique, articles de sport, etc.) à l'aide de CSS. J'ai trouvé une vieille question mentionnant que cela n'est pas possible en utilisant HTML et CSS, mais j'espère qu'il existe maintenant une solution.

Answer 1

Non, cela n'est pas possible car le style de ces éléments est géré par le système d'exploitation de l'utilisateur. MSDN est là pour répondre à vos questions :

Answer 2

Seuls quelques attributs de style peuvent être appliqués aux éléments <option>.

En effet, ce type d'élément est un exemple d'"élément de remplacement". Ils dépendent du système d'exploitation et ne font pas partie du HTML/navigateur. Il ne peut pas être stylisé via CSS.

Il existe des plugins/bibliothèques alternatifs qui ressemblent à <select> mais sont en fait constitués d'éléments HTML standards qui peuvent être stylisés.