Comment styliser l'option d'un élément html "select" ?

Voici mon HTML :

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Je veux que le nom du produit (c'est-à-dire 'Product1&#39 ;, 'Product2&#39 ;, etc) soit en gras et que ses catégories (c'est-à-dire Electronics, Sports, etc) soient en italique, en utilisant uniquement CSS. J'ai trouvé une ancienne question qui mentionnait que ce n'était pas possible avec HTML et CSS, mais j'espère qu'il y a maintenant une solution.

TylerH
Question modifiée 27 mars 2019 в 2:05
Programmation
html css drop-down-menu
26 août 2011 в 6:02
Aucun avis pour le moment
Solution

Il n'y a que quelques attributs de style qui peuvent être appliqués à un élément ``.

Cela est dû au fait que ce type d'élément est un exemple d'un "élément remplacé&quot ;. Ils sont dépendants du système d'exploitation et ne font pas partie du HTML/navigateur. Il ne peut pas être stylé via CSS.

Il existe des plug-ins/bibliothèques de remplacement qui ressemblent à un <select> mais qui sont en fait composés d'éléments HTML ordinaires qui CAN peuvent être stylisés.

Jacob
Réponse modifiée 30 septembre 2019 в 9:58
Commentaires (8)

Non, ce n'est pas possible, car le style de ces éléments est géré par le système d'exploitation de l'utilisateur. [MSDN répondra à votre question ici][1] :

À l'exception de background-color et color, les paramètres de style appliqués par l'intermédiaire de l'objet style pour l'élément option sont ignorés.

[1] : https://web.archive.org/web/20170528070441/http://msdn.microsoft.com/en-us/library/ms535877(v=vs.85).aspx

georgeawg
Réponse modifiée 2 novembre 2019 в 8:10
Commentaires (6)

Comme indiqué plus haut, ce n'est pas vraiment possible ; cependant, si vous souhaitez simplement donner un style à l'état initial de quelque chose comme une option "Select Product..." avant que l'utilisateur n'interagisse avec le champ, vous pouvez faire quelque chose comme ci-dessous...

L'exemple ci-dessous donne un style rouge à la première option (techniquement, à toutes les options) et, dès qu'un utilisateur interagit, il supprime cette option (qui a la valeur="defaultValue&quot ; définie) et supprime la classe appliquée à la sélection. Vous pouvez également appliquer d'autres options que la couleur, mais elles n'affecteront que le champ une fois modifié, et non la vue en liste.

CSS

.default-value{
  color: red;
}

jQuery

$("select").addClass('default-value');

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});
Victor Bjelkholm
Réponse modifiée 27 avril 2013 в 3:41
Commentaires (0)