1378 votes

Comment styliser un <select> dropdown avec CSS uniquement sans JavaScript?

Est-il un CSS uniquement pour un style <select> liste déroulante?

J'ai besoin d'un style <select> formulaire d'autant qu'il est humainement possible, sans JavaScript. Quelles sont les propriétés que je peux utiliser pour le faire en CSS?

Ce code doit être compatible avec tous les principaux navigateurs:

  • Internet Explorer 6,7 et 8
  • Firefox
  • Safari

Je sais que je peux le faire avec JavaScript: Exemple.

Et je ne parle pas de style simple. Je veux savoir, ce que le mieux que nous puissions faire avec CSS.

J'ai trouvé des questions similaires sur un Débordement de Pile.

Et ce un sur Doctype.com.

1065voto

Danield Points 17720

Après de longues recherches, j'ai trouvé deux approches raisonnables pour la création pure CSS sélectionnez menu déroulant.

Approche n ° 1. Article Original ici

Envelopper le sélectionner l'élément dans un div avec une largeur fixe (disons 150 pixels) et de dépassement de caché. Donner ensuite la sélectionner l'élément d'une largeur d'environ 20 pixels de plus que la div. Le résultat est que par défaut, la flèche de la liste déroulante de la sélectionner l'élément sera coupé, et vous pouvez placer n'importe quel fond de l'image que vous voulez sur le côté droit de la div.

L' avantage de cette approche est qu'il est cross-browser (Internet Explorer 8 et versions ultérieures, WebKitet Gecko). Cependant, le désavantage de cette approche est que les options de la liste déroulante déborde sur le côté droit (par 20 pixels qui nous a caché... parce que l'option éléments prennent la largeur de la sélection elment).

[Il convient de noter, toutefois, que si la coutume sélectionner l'élément est nécessaire pour MOBILE ce problème ci-dessus ne s'applique pas - en raison de la façon dont chaque téléphone en mode natif ouvre l'élément select. Donc pour mobile, c'est probablement la meilleure solution.]

[Voici une démo de cette approche]

Approche #2 message Original ici

Utiliser l' pointer-events de la propriété.

L'idée ici est de superposition d'un élément sur le natif de flèche déroulante (pour créer notre propre) et puis interdire les événements de pointeur sur elle.

Avantage: Pas de supplément de balisage, fonctionne bien dans WebKit et Gecko.

Inconvénient: Internet Explorer ne prend pas en charge pointer-events. (même Internet Explorer 10), ce qui signifie que vous ne pouvez pas cliquer sur la flèche personnalisé. Aussi, un autre (évident) inconvénient de cette méthode est que vous ne pouvez pas cibler votre nouvelle image de flèche avec un effet hover ou curseur en forme de main, parce que nous avons juste désactivé les événements de pointeur sur eux!

Cependant, avec cette méthode, vous pouvez utiliser Moderniste ou des commentaires conditionnels pour faire d'Internet Explorer revenir à la norme construite en flèche.

C'est, à mon avis, est la meilleure solution disponible à ce jour (au moins jusqu'à l' appearance de la propriété devient plus large prise en charge du navigateur).

Ici est un violon (qui utilise la deuxième approche avec Internet Explorer conditionnelles) où vous pouvez vérifier cela.

Être que Internet Explorer 10 ne prend pas en charge conditional comments plus: Si vous souhaitez utiliser l'approche #2, vous devriez probablement utiliser Modernizr. Cependant, il est toujours possible d'exclure le pointeur d'événements de la CSS à partir d'Internet Explorer 10 avec un CSS hack décrit dans le Débordement de la Pile question Comment dois-je cibler uniquement Internet Explorer 10 pour certaines situations, comme Internet Explorer CSS spécifiques ou Internet Explorer code JavaScript spécifique?.

237voto

Matthew Morek Points 1895

C'est possible, mais malheureusement pour la plupart dans Webkit, navigateurs dans la mesure où nous, en tant que développeurs, l'exigent. Voici l'exemple de CSS style recueillies à partir de Chrome panneau d'options via les outils de développement de l'inspecteur, l'amélioration de match actuellement pris en charge les propriétés CSS dans la plupart des navigateurs modernes:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ 
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Lorsque vous exécutez ce code sur toutes les pages dans un navigateur basé sur Webkit, il devrait modifier l'apparence de la zone de sélection, supprimer standard de l'OS de la flèche et ajouter un PNG-flèche, mettre de l'espacement avant et après l'étiquette, presque tout ce que vous voulez.

La partie la plus importante est appearance de la propriété, ce qui change la façon dont l'élément se comporte.

Il fonctionne parfaitement dans presque tous les navigateur basé sur Webkit, y compris les téléphones mobiles, bien que Gecko ne prend pas en charge appearance ainsi que Webkit, il me semble.

67voto

pavium Points 7845

L'élément select et sa fonction de menu déroulant sont difficiles à coiffer.

les attributs de style pour sélectionner l'élément confirme ce que Ryan Dohery dit dans un commentaire à la première réponse:

"L'élément select est une partie de la système d'exploitation, le navigateur Chrome. Par conséquent, il est très peu fiable pour le style, et il n'a pas forcément de sens pour essayer de toute façon."

45voto

ioTus Points 406

La plus grande incohérence que j'ai remarqué lors d'un style de sélectionner des listes déroulantes est Safari et Google Chrome rendu (Firefox est entièrement personnalisable via CSS). Après quelques recherche à travers les profondeurs obscures de l'Internet, je suis tombé sur le suivant, qui a presque complètement résout mes scrupules avec WebKit:

Safari et Google Chrome correctif:

select
  -webkit-appearance: none;

Ce n'est, cependant, enlever la flèche de menu déroulant. Vous pouvez ajouter une flèche de menu déroulant à l'aide de la proximité d'une div avec un fond, marge négative ou absolument positionnée sur l'sélectionnez le menu déroulant.

*Plus d'informations et d'autres variables sont disponibles dans la propriété CSS: -webkit-appearance.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X