Comment styliser l '<option> avec uniquement CSS?

Remarque: cette question ne concerne pas la création d'une liste déroulante personnalisée. Il ne s'agit que de possibilités de styliser les <option>éléments dans l'élément select en CSS

Comment puis-je styliser <option>un <select>élément avec une compatibilité entre navigateurs? Je connais de nombreuses méthodes JavaScript permettant de personnaliser la liste déroulante à convertir <li>, ce dont je ne parle 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 qui pourrait être possible avec CSS uniquement, avec la compatibilité pour IE9 +, Firefox et Chrome.

Je veux coiffer comme ça ou aussi près que possible.

J'ai essayé ici http://jsfiddle.net/jitendravyas/juwz3/3/ , mais Chrome ne montre aucun style sauf la couleur de la police, tandis que Firefox en montre plus. Comment faire fonctionner la bordure et le rembourrage dans Chrome également?

EDIT 2015 Mai

Clause de non-responsabilité: j'ai pris l'extrait de la réponse ci-dessous:

Mise à jour importante!

En plus de WebKit, à partir de Firefox 35, nous pourrons utiliser la appearancepropriété:

En utilisant -moz-appearanceavec la nonevaleur sur une zone de liste déroulante, supprimez maintenant le bouton déroulant

Alors maintenant, pour masquer le style par défaut, c'est aussi simple que d'ajouter les règles suivantes sur notre élément de sélection:

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

Pour la prise en charge 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 CSS pur. Cependant, voici quelque chose de similaire que vous pouvez choisir comme solution de 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>

ÉDITER

Voici la question que vous avez posée il y a quelque temps. Comment styliser une liste déroulante <select> avec CSS uniquement sans JavaScript? Comme il le dit, ce n'est que dans Chrome et dans une certaine mesure dans Firefox que vous pouvez réaliser ce que vous voulez. Sinon, malheureusement, il n'y a pas de solution CSS pure pour tous les navigateurs pour styliser une sélection.

Il n'y a pas de manière inter-navigateurs de styliser les éléments d'options, certainement pas dans la mesure de votre deuxième capture d'écran. Vous pourrez peut-être les mettre en gras et définir la taille de la police, mais ce sera à peu près tout ...

J'ai joué avec certains éléments avant et sans remplacer la fonctionnalité avec JavaScript, je ne pense pas que ce soit possible dans Chrome. Que vous utilisiez un plugin ou que vous écriviez votre propre code, CSS seul est interdit pour Chrome / Safari et comme vous l'avez dit, Firefox est meilleur pour le gérer.