Personnalisation de la flèche Sélectionner une apparence pour la compatibilité des navigateurs croisés

dans un effort pour améliorer l'esthétique d'un élément sélectionné, il est courant de remplacer la flèche par défaut par une image personnalisée. Cependant, la réalisation de cette compatibilité entre les navigateurs peut être un défi.

pour résoudre ce problème, envisagez d'incorporer le code suivant dans votre CSS:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Cet ajout supprime l'apparence de flèche par défaut dans tous les principaux navigateurs.

Malheureusement, Firefox ne prend en charge entièrement cette fonctionnalité que la version 35. Pour les versions antérieures, une solution de contournement est nécessaire. Une telle approche, démontrée dans un exemple JSFiddle, consiste à cacher la flèche d'origine et à la remplacer par une image d'arrière-plan qui imite la fonctionnalité de la flèche lorsque l'élément sélectionné est plané.