Comment donner un style à la <option> avec seulement du CSS ?

Question

Remarque : cette question ne concerne pas la création d'une liste déroulante personnalisée. Elle porte uniquement sur les possibilités de style <option> dans l'élément de sélection en CSS

Comment puis-je styliser <option> s d'un <select> avec une compatibilité entre navigateurs ? Je connais de nombreux moyens JavaScript qui permettent de personnaliser la liste déroulante pour la convertir en un élément de type <li> ce que je ne demande pas.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Je demande ce qu'il serait possible de faire avec CSS uniquement, avec une compatibilité pour IE9+, Firefox et Chrome.

Je veux avoir un style comme celui-ci ou aussi proche que possible.

J'ai essayé ici http://jsfiddle.net/jitendravyas/juwz3/3/ mais Chrome n'affiche aucun style, à l'exception de la couleur de la police, alors que Firefox en affiche davantage. Comment faire pour que la bordure et le remplissage fonctionnent également dans Chrome ?

Answer 1

EDIT 2015 Mai

Clause de non-responsabilité : J'ai repris le passage de la réponse dont le lien figure ci-dessous :

Mise à jour importante !

En plus de WebKit, à partir de Firefox 35 nous pourrons utiliser le appearance propriété :

Utilisation de -moz-appearance avec le none sur une liste déroulante supprime désormais la valeur bouton déroulant

Maintenant, pour masquer le style par défaut, il suffit d'ajouter les règles suivantes à notre élément select :

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Pour le support d'IE 11, vous pouvez utiliser [ ::-ms-expand ][15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Ancienne réponse

Malheureusement, ce que vous demandez n'est pas possible en utilisant du pur CSS. Cependant, voici quelque chose de similaire que vous pouvez choisir comme contournement. Vérifiez le code en direct ci-dessous.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

EDIT

Voici la question que vous avez posée il y a quelque temps. Comment styliser un menu déroulant <select> uniquement avec CSS sans JavaScript ? Comme il est dit ici, vous ne pouvez obtenir ce que vous voulez que dans Chrome et, dans une certaine mesure, dans Firefox. Sinon, malheureusement, il n'existe pas de solution CSS pure inter-facteurs pour styliser une sélection.

Answer 2

Il n'existe pas de moyen inter-navigateur de styliser les éléments d'option, certainement pas dans la mesure de votre deuxième capture d'écran. Vous pouvez peut-être les mettre en gras et définir la taille de la police, mais c'est à peu près tout...

Answer 3

J'ai déjà joué avec des éléments de sélection et je ne pense pas que cela soit possible dans Chrome sans remplacer la fonctionnalité par du JavaScript. Que vous utilisiez un plugin ou que vous écriviez votre propre code, l'utilisation de CSS uniquement est impossible dans Chrome/Safari et, comme vous l'avez dit, Firefox est plus à même de s'en occuper.