web-dev-qa-db-fra.com

Comment styler <option> avec seulement CSS?

Remarque: cette question ne concerne pas la création d'un menu déroulant personnalisé. Il ne s'agit que de possibilités de styliser les éléments <option> au sein de l'élément select en CSS

Comment styliser <option>s d'un élément <select> avec compatibilité entre navigateurs? Je connais de nombreuses méthodes JavaScript qui personnalisent le menu déroulant pour le convertir en <li>, ce dont je ne vous 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 une compatibilité pour IE9 +, Firefox et Chrome.

enter image description here

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

enter image description here

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 davantage. Comment faire fonctionner les bordures et les marges dans Chrome aussi?

csscss3html-select
99
Jitendra Vyas

EDITER 2015 Mai

Disclaimer: 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 propriété appearance:

En utilisant -moz-appearance avec la valeur none sur une liste déroulante, supprimez le bouton déroulant.

Alors maintenant, afin de 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 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 live 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 styler un menu déroulant <select> avec CSS uniquement sans JavaScript? Comme il est indiqué ici, vous ne pouvez obtenir que ce que vous voulez dans Chrome et, dans une certaine mesure, dans Firefox. Sinon, malheureusement, il n’existe pas de solution purement CSS pour tous les navigateurs permettant de styler une sélection.

70
Savas Vedova

Il n’existe pas de méthode de stylisation des éléments d’option inter-navigateurs, certainement pas à 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 ...

4
danwellman

J'ai joué avec certains éléments avant et sans surcharger 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/Chrome est un non-droit pour Chrome/Safari et, comme vous l'avez dit, Firefox est meilleur pour le gérer.

2
cchana