Comment styliser l '<option> avec uniquement CSS?

102

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.

entrez la description de l'image ici

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

entrez la description de l'image ici

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?

css html-select Jitendra Vyas
la source
@ManseUK - Il ne s'agit que de <option>la liste déroulante
Jitendra Vyas
2
@ManseUK: Je ne suis pas sûr que ce soit la même chose. Cette question demande si vous pouvez styliser l' <select>apparence de l' élément sur la page. Cette question vous demande si vous pouvez styliser la liste des <option>éléments.
Andy E
13
Pour l'amour de Dieu, ce n'est PAS un double de AUCUNE des deux questions liées (qui sont d'ailleurs différentes l'une de l'autre). L'un concerne uniquement le style de la sélection et non l'option, tandis que celui-ci demande également de styliser les options, et l'autre n'a pas l'exigence only-css / no-js.
matteo
12
J'en ai marre de voir des questions marquées à tort comme des doublons, ou mal fermées, le rester pendant des années alors qu'elles se sont avérées fausses.
matteo
2
@ovokuro codepen.io/lambder/pen/NbmwRb
Lambder

Réponses:

70

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>
Développer l'extrait

É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.

Savas Vedova
la source
3
+1 merci, c'est un bon code. mais dans mon cas, je veux faire avec <select>. l'utilisation de <div>n'est pas correcte sur le plan sémantique.
Jitendra Vyas
2
@JitendraVyas, je sais, mais comme je l'ai répondu, ce n'est pas possible. Ce que vous avez réalisé sur la première image est le maximum que vous puissiez faire. Voir la modification. Au fait, j'ai également répondu à votre question précédente, veuillez la lire.
Savas Vedova
La partie «mise à jour importante» implique que vous pouvez styliser les optionbalises avec css, mais vous ne pouvez pas, vous ne pouvez styliser que la selectbalise. Ce qui est montré dans cette réponse
svnm
Voici une version JavaScript de l'exemple ci-dessus qui ajoute un rappel et quelques autres fonctionnalités utiles: dynamicdrive.com/dynamicindex1/ergodropdown.htm
coco puffs
4

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 ...

Danwellman
la source
2

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.

cchana
la source
Veuillez supprimer le dernier paragraphe - l'URL n'est pas accessible en ligne.
kumarharsh