Quelle est la valeur correcte de «-moz-aspect» pour masquer la flèche déroulante d’un élément ?

J’essaie de styliser la flèche déroulante d’un élément avec CSS uniquement, cela fonctionne parfaitement dans Chrome / Safari:

 select { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url('./select-arrow1.png') ; background-position: center right; background-repeat: no-repeat; border: 1px solid #AAA; margin: 0; padding-top: 2px; padding-bottom: 2px; width: 200px; } 

Qui rend magnifiquement comme vu ici

Par cette logique, la seule chose que je devais faire pour que cela fonctionne dans Firefox était d’append tous les éléments -webkit-* comme -moz-* :

 -moz-appearance: button; -moz-border-radius: 2px; -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-padding-end: 20px; -moz-padding-start: 2px; -moz-user-select: none; 

Cela fonctionne pour 99%, le seul problème est que la flèche déroulante par défaut ne disparaît pas et rest au-dessus de l’image d’arrière-plan comme vu ici

Il ressemble à -moz-appearance: button; ne fonctionne pas pour un élément . Aussi -moz-appearance: none; n’a aucun effet pour supprimer la flèche déroulante par défaut.

Alors, quelle est la valeur correcte pour -moz-appearance pour supprimer la flèche déroulante par défaut?

Mises à jour:

11 décembre 2014 : Arrêtez d’inventer de nouveaux hacks . Après 4 ans et demi, -moz-appearance:none ne commence à fonctionner depuis Firefox 35. Bien que moz-appearance:button est toujours cassé, vous n’avez pas besoin de l’utiliser de toute façon. Voici un exemple de travail très basique.

28 avril 2014 : le piratage css mentionné a fonctionné pendant quelques mois mais depuis le début d’avril 2014, ce bogue revient progressivement dans Firefox 31.0.a1 Nightly sur toutes les plates-formes.

C’est ça les gars! FIXÉ!


Attendez et voyez: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

ou solution de contournement


Pour ceux qui se demandent:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

Tout d’abord, le bogue contenant beaucoup de spams hostiles crée un environnement de travail hostile pour quiconque y est affecté.

Deuxièmement, la personne qui a la capacité de le faire (ce qui inclut la réécriture) a été affectée à un autre projet (b2g) pour le moment et n’aura pas le temps d’arriver à son terme.

Troisièmement, même lorsque cette personne a encore le temps, rien ne garantit que ce sera une priorité car, malgré la présence de Webkit, elle brise la spécification de la façon dont elle est censée fonctionner (c’est ce que l’on m’a dit, je ne le fais pas personnellement). connaître les spécifications)

Maintenant, consultez https://wiki.mozilla.org/B2G/Schedule_Roadmap 😉


La page n’existe plus et le bogue n’a pas été corrigé, mais João Cunha a résolu le problème, vous pouvez le remercier pour le moment!

Mise à jour: ceci a été corrigé dans Firefox v35. Voir la liste complète pour plus de détails.


== comment cacher la flèche de sélection dans Firefox ==

Juste compris comment le faire. L’astuce consiste à utiliser un mélange d’ -prefix-appearance de -prefix-appearance , text-indent text-overflow et text-overflow . C’est du pur CSS et ne nécessite aucun balisage supplémentaire.

 select { -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; } 

En résumé, en le poussant un peu à droite, le débordement élimine la flèche. Joli, hein?

Plus de détails sur cet aperçu que je viens d’écrire. Testé sur Ubuntu, Mac et Windows, tous avec les versions récentes de Firefox.

Pour se débarrasser de la flèche déroulante par défaut, utilisez:

 -moz-appearance: window; 

Essayez de mettre l’opacité: 0; votre élément select sera invisible mais les options seront visibles lorsque vous cliquerez dessus.

Dans Mac OS -moz-appearance: window; enlèvera la flèche pour les documents MDN ici: https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance . Testé sur Firefox 13 sous Mac OS X 10.8.2. Voir aussi: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21 .

Il vaut la peine d’essayer ces 2 options ci-dessous pendant que nous attendons toujours le correctif dans FF35:

 select { -moz-appearance: scrollbartrack-vertical; } 

ou

 select { -moz-appearance: treeview; } 

Ils masqueront simplement une image d’arrière-plan de flèche que vous avez placée pour personnaliser votre élément select. Ainsi, vous obtenez une flèche de navigateur standard au lieu d’un horrible combo de la flèche du navigateur et de votre propre flèche personnalisée.

Bien que vous ne puissiez pas encore obtenir que Firefox supprime la flèche de la liste déroulante (voir l’article de MatTheCat), vous pouvez masquer votre image d’arrière-plan “stylisée” dans Firefox.

 -moz-background-position: -9999px -9999px!important; 

Cela le positionnera hors du cadre, vous laissant avec la flèche de sélection par défaut – tout en conservant la version stylisée dans Webkit.

ça marche quand on ajoute:

select {width: 115%}