Quelle est la valeur "-moz-apparence" correcte pour masquer la flèche déroulante d'un <select> élément

Question

Je suis en train de style de la flèche de menu déroulant d'un <select> élément avec CSS , il 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;
}

Ce qui rend magnifiquement comme on le voit ici

Par cette logique, la seule chose que j'avais à faire pour que cela fonctionne dans Firefox, c'était d'ajouter tous -webkit-* trucs en -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;

Il fonctionne pour les 99%, le seul problème est que par défaut, la flèche de menu déroulant ne disparaît pas et reste au-dessus de l'image d'arrière-plan comme on le voit ici

Il ressemble -moz-appearance: button; ne fonctionne pas pour un <select> élément. Aussi -moz-appearance: none; n'a pas d'effet de supprimer la valeur par défaut flèche de menu déroulant.

Alors, quelle est la valeur correcte pour -moz-appearance pour supprimer le défaut flèche de menu déroulant?

Mises à jour:

28 avril 2014: Le dessus css hack travaillé pour un couple de mois, mais depuis le début du mois d'avril 2014, ce bug est rampant en arrière dans Firefox 31.0.a1 tous les Soirs sur toutes les plateformes.

Answer 1

Mise à jour: cette astuce cessé de travailler comme des FF 31 (actuellement dans les Nightly builds). Aucun autre correctif à ce jour. Gardez vos yeux sur la pleine essentiel pour les mises à jour.

---

== comment masquer la flèche sélectionner dans Firefox ==

Viens de comprendre comment le faire. L'astuce consiste à utiliser un mélange d' -prefix-appearance, text-indent et text-overflow. C'est du pur CSS et ne nécessite pas de supplément de balisage.

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

Longue histoire courte, en poussant un tout petit peu vers la droite, le dépassement de se débarrasser de la flèche. Très soigné, hein?

Plus de détails sur ce gist je viens d'écrire. Testé sur Ubuntu, Mac et Windows, le tout avec les dernières versions de Firefox.

PS: Il est toujours utile de mentionner que le bug n'est pas résolu encore, donc c'est juste une solution de contournement. Pour plus de détails, consultez cette 2011 de rapport de bogue.

Answer 2

Attendre et voir: 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

D'abord, parce que le bug a beaucoup de hostile spam, il crée un milieu de travail hostile pour quelqu'un qui est attribué à ce.

Deuxièmement, la personne qui a la capacité de le faire (ce qui inclut la réécriture ) a été affecté à un autre projet (b2g) pour le moment et n'avez pas de temps jusqu'à ce que le projet se rapprocher à la fin.

Troisièmement, même lorsque la personne a le temps encore une fois, il n'y a aucune garantie que ce sera une priorité, car, en dépit de webkit avoir cela, il se casse la spécification de la façon dont est censé travailler (c'est Ce que m'a dit, je ne connais pas personnellement les specs)

Maintenant voir https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

---

La page n'existe plus et le bug n'est pas fixe, mais une solution acceptable est venu de João Cunha, les gars, vous pouvez le remercier pour l'instant!

Answer 3

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

 -moz-appearance: window; 
 

Answer 4

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

Answer 5

Sous Mac OS, -moz-appearance: window; supprimera la flèche associée aux documents MDN ici: https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance . Testé sur Firefox 13 sur Mac OS X 10.8.2. Voir aussi: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21 .