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

Question

Voici mon HTML :

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

Je veux rendre le nom du produit (i.e. 'Product1', 'Product2', etc) en gras, et ses catégories (viz. Electronics, Sports, etc) en italique, en utilisant uniquement CSS. J'ai trouvé une ancienne question qui mentionnait que ce n'est pas possible en utilisant HTML et CSS, mais j'espère qu'il y a une solution maintenant.

Answer 1

Il semble que je puisse simplement définir le CSS pour l'option select dans Chrome ou Firefox directement. Les codes CSS et HTML sont fournis ci-dessous :

.boldoption {
    font-weight: bold;
}

<select>
    <option>Some normal-font option</option>
    <option>Another normal-font option</option>
    <option class="boldoption">Some bold option</option>
</select>

Answer 2

Certaines propriétés peuvent être stylisées pour <option> étiquette :

• font-family
• color
• font-*
• background-color

Vous pouvez également utiliser une police personnalisée pour chaque <option> par exemple, toute police google , Icônes matérielles ou d'autres polices d'icônes à partir de icomoon ou similaire. (Cela peut s'avérer pratique pour les sélecteurs de police, etc.)

Compte tenu de ce qui précède, vous pouvez créer une pile de polices de caractères et insérer des icônes dans <option> balises, par exemple.

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

donde ★ est tiré de Icons et le reste vient de Roboto .

Notez toutefois que les polices personnalisées ne fonctionnent pas sur les téléphones portables.

Answer 3

Comme déjà mentionné, le seul moyen est d'utiliser un plugin qui remplace <select> fonctionnalité.

Une liste de plugins jQuery : http://plugins.jquery.com/tag/select/

Jetez un coup d'œil à l'exemple utilisant Select2 plugin : http://jsfiddle.net/swsLokfj/23/

Answer 4

En fait, vous pouvez ajouter :before et :after et leur donner un style. Au moins, c'est quelque chose

option {
  font-size: 18px;
  background-color: #ffffff;
}

option:before {
  content: ">";
  font-size: 20px;
  display: none;
  padding-right: 10px;
  padding-left: 5px;
  color: #fff;
}

option:hover:before {
  display: inline;
}

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

Answer 5

Une norme select ne peuvent pas être stylisés, mais jetez un coup d'œil à quelque chose comme ceci .

Naturellement, il faut que JavaScript soit activé sur le navigateur du client. Il en existe d'autres comme celle-ci (probablement beaucoup). Il existe peut-être aussi des astuces HTML/CSS qui ne nécessitent pas JavaScript, mais je n'en ai encore jamais rencontré.