Comment puis-je personnaliser le style de flèche dans une entrée de sélection dans différents navigateurs ?

Personnalisation du style de flèche dans les entrées sélectionnées

La tâche à accomplir consiste à remplacer l'image de flèche par défaut dans une entrée sélectionnée par une image personnalisée. Cependant, les efforts visant à implémenter cette personnalisation n'ont abouti que dans Chrome.

Le code HTML et CSS fourni implique la création d'un élément div avec les mêmes dimensions que l'entrée de sélection et la définition de son arrière-plan comme transparent. Une image de la flèche souhaitée est incluse en arrière-plan dans le coin supérieur droit du div.

Malheureusement, Firefox et IE9 affichent la flèche d'origine au lieu de l'image personnalisée. Pour résoudre ce problème, envisagez d'utiliser les modifications CSS suivantes :

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

Ce code, lorsqu'il est appliqué à l'élément select, supprime le style par défaut du navigateur, y compris la flèche. Cependant, il convient de noter que Firefox ne prend entièrement en charge cette fonctionnalité qu'à partir de la version 35.

Une approche alternative consiste à utiliser JavaScript. Une solution de contournement a été démontrée dans ce jsfiddle : https://jsfiddle.net/b5gu6306/

En résumé, pour personnaliser le style de flèche dans une entrée de sélection, modifiez l'apparence de l'élément de sélection à l'aide du code CSS suggéré. Pour les versions de Firefox antérieures à 35, envisagez d'implémenter la solution de contournement JavaScript fournie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!