web-dev-qa-db-fra.com

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

J'essaie d'appeler la flèche déroulante d'un élément <select> uniquement avec CSS, 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;
}

Ce qui rend magnifiquement comme on le voit ici

Selon cette logique, la seule chose que je devais faire pour que cela fonctionne dans Firefox était d’ajouter tous les éléments -webkit-* en tant que -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 à 99%, le seul problème est que la flèche déroulante par défaut ne disparaît pas et reste en haut de l'image d'arrière-plan comme on le voit ici

Il semble que -moz-appearance: button; ne fonctionne pas pour un élément <select>. De plus, -moz-appearance: none; n'a aucun effet sur la suppression de la flèche déroulante par défaut.

Alors, quelle est la valeur correcte pour -moz-appearance pour supprimer la flèche de liste 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 commence à fonctionner depuis Firefox 35. Bien que moz-appearance:button soit toujours endommagé, vous n'avez de toute façon pas besoin de l'utiliser. Voici un exemple de travail très basique.

28 avril 2014: Le css hack a fonctionné pendant quelques mois, mais depuis le début du mois d’avril 2014, ce bogue s’insinue dans Firefox 31.0.a1 Nightly sur toutes les plateformes.

cssfirefoxwebkitgecko
67
Tony

C'est ça les gars! FIXE!

Attendez de 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

Premièrement, comme le bogue contient beaucoup de spam hostile, il crée un lieu de travail hostile pour tous les destinataires. 

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 que ce projet soit proche de l'achèvement.

Troisièmement, même lorsque cette personne a de nouveau le temps, il n’ya aucune garantie que ce sera une priorité, car malgré le Webkit, cela ne respecte pas les spécifications de la manière dont il est censé fonctionner (c’est ce qui m’a été dit, je connaître les spécifications)

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

La page n'existe plus et le bogue n'a pas été corrigé mais une solution de contournement acceptable est venu de João Cunha, vous pouvez le remercier pour le moment!

38
MatTheCat

Mise à jour: ceci a été corrigé dans Firefox v35. Voir le Gist complet pour plus de détails.

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

Je viens de comprendre comment le faire. L'astuce consiste à utiliser un mélange de -prefix-appearance, text-indent 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: '';
}

Bref, en le poussant un peu vers la droite, le débordement supprime la flèche. Plutôt chouette, 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.

98
João Cunha

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

-moz-appearance: window;
4
RD.

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

1
Josh Byvelds

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 .

0
Joshua Davis

Cela 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 toute image d'arrière-plan de flèche que vous aurez insérée dans le style personnalisé de votre élément sélectionné. Ainsi, vous obtenez une flèche de navigateur standard de bog au lieu d'une combinaison horrible de flèche de navigateur et de votre propre flèche personnalisée.

0
El Guapo