Salut à tous, j'essaie de styliser une <select>
en utilisant CSS3 (je sais, les styles personnalisés pour les éléments de formulaire sont une mauvaise idée en général). J'obtiens les résultats que je souhaite dans Webkit (Chrome / Safari), mais Firefox ne joue pas le jeu (je ne m'embête même pas avec IE). J'utilise la méthode CSS3 appearance
mais pour une raison quelconque, je n'arrive pas à faire disparaître l'icône de la liste déroulante de Firefox.
Voici un exemple de ce que je fais : http://jsbin.com/aniyu4/2/edit
#dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
Comme vous pouvez le voir, je ne cherche pas à faire quelque chose d'extraordinaire. Je veux juste supprimer les styles par défaut et ajouter ma propre flèche déroulante. Comme je l'ai dit, c'est génial dans Webkit, mais pas dans Firefox. Apparemment, le -moz-appearance: none
ne supprime pas l'élément de la liste déroulante.
Des idées ? Et, non, le javascript n'est pas une option. Je ne veux pas exécuter javascript pour quelque chose d'aussi stupide.