Changer la couleur et l’apparence de la flèche déroulante

Je souhaite modifier l’apparence par défaut de la flèche d’une liste déroulante afin qu’elle soit identique pour tous les navigateurs. Existe-t-il un moyen de remplacer l’apparence par défaut de la flèche déroulante en utilisant CSS ou autre?

Vous pouvez y parvenir avec CSS, mais vous ne modifiez pas techniquement la flèche elle-même.

Dans cet exemple, je cache en fait la flèche par défaut et affiche ma propre flèche à la place.

HTML:

CSS:

 .styleSelect select { background: transparent; width: 168px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; color: #000; } .styleSelect { width: 140px; height: 34px; overflow: hidden; background: url("images/downArrow.png") no-repeat right #fff; border: 2px solid #000; } 

Non, la personnalisation des formulaires entre navigateurs est très difficile, voire impossible, pour tous les navigateurs. Si vous vous souciez vraiment de l’apparence de ces widgets, vous devez utiliser une implémentation javascript.

voir http://www.456bereastreet.com/archive/200409/styling_form_controls/ et http://developer.yahoo.com/yui/examples/button/btn_example07.html

Cela peut être fait par:

 select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; } 
 select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 0px; appearance: none; outline-width: 0; padding: 10px 10px 10px 5px; display: block; width: 10em; border: none; font-size: 1rem; border-bottom: 1px solid #757575; } 
 

L’élément est généré par l’application et le style ne fait pas partie de la spécification CSS / HTML.

Vous devriez le simuler avec votre propre DIV et le superposer à celui existant, ou créer votre propre contrôle en émulant la même fonctionnalité.

Non, vous ne pouvez pas le faire en utilisant une réelle, mais il existe des techniques qui vous permettent de les “remplacer” par des solutions javascript plus performantes.

Voici un bon article sur le sujet:

Pas facile à faire, j’ai peur. Le problème est que Css ne peut pas remplacer la flèche dans une sélection car elle est rendue par le navigateur. Mais vous pouvez créer un nouveau contrôle à partir des éléments div et input et de Javascript pour exécuter la même fonction que le select.

Essayez par exemple d’examiner certains des plug-ins de saisie semi-automatique pour Jquery.

Sinon, il y a des informations sur l’élément select ici:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

Si vous ne prévoyez pas de créer votre propre liste déroulante (et de ne pas utiliser une liste déroulante de bibliothèque standard), vous êtes bloqué. L’aspect du contrôle DDL va être basé sur le système que vous utilisez et / ou sur le navigateur qui affiche les résultats.

Nous avons utilisé YUI, Chosen, et utilisons actuellement le plugin jQuery Select2: https://select2.github.io/

C’est assez robuste, la flèche n’est que la pointe de l’iceberg.

Dès que les sélections stylisées deviennent une exigence, je suis d’accord avec les autres, optez pour un plugin. Ne te tue pas en réinventant la roue.

Essayez de changer la couleur de votre atsortingbut “border-top” en blanc