web-dev-qa-db-fra.com

Styliser un élément sélectionné dans Firefox

Im essayant de styliser un <select> dans Firefox. En chrome je l'ai fait avec:

-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;

Mais sur Firefox, je ne peux pas sembler pouvoir obtenir le même résultat avec

-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;

Des idées? Merci.

cssfirefoxstyles
18
Enrique Moreno Tent

Depuis Firefox 35, "-moz-appearance:none "que vous avez déjà écrit dans votre code, supprimez enfin le bouton fléché comme vous le souhaitez.

C'était un bug résolu depuis cette version.

15
Luca Detomi

On dirait que c'est un bug sur Firefox: -moz-apparence: aucun avec l'élément select. Voir ce rapport de bogue pour plus d'informations: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

8
Andriy Budzinskyy

Copie exacte comme celle-ci: https://stackoverflow.com/a/18317228/141116

Même réponse:

Je viens de découvrir comment supprimer la flèche de sélection de Firefox. L'astuce consiste à utiliser un mélange d'apparence -prefix, de retrait de texte et de débordement de texte. C'est du CSS pur et ne nécessite aucun balisage supplémentaire.

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

Testé sur Windows 8, Ubuntu et Mac, dernières versions de Firefox.

Exemple en direct: http://jsfiddle.net/joaocunha/RUEbp/1/

Plus d'informations sur le sujet: https://Gist.github.com/joaocunha/6273016

4
João Cunha

Vous pouvez essayer d'utiliser une valeur différente pour -moz-appearance propriété. Par exemple -moz-appearance: toolbox; fonctionne bien pour moi.

La liste complète des valeurs peut être trouvée ici: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

2
svestka

EDIT [2]: depuis que @ joão-cunha astuce géniale a cessé de fonctionner dans FF30, consultez cette nouvelle solution: http://jsfiddle.net/sstur/2EZ9f/ (basée sur l'écran de @ keska: correction flexible et magie de l'ombre du texte)

EDIT: Cela peut être fait en utilisant du CSS pur, comme démontré ici: http://jsfiddle.net/sstur/fm5Jt/

Cela le stylisera dans Chrome, Firefox, IE10 + et se dégradera avec élégance dans les anciens IE et autres navigateurs hérités. Il utilise diverses solutions de contournement spécifiques au fournisseur, notamment -webkit-appearance: none comme vous l'avez mentionné.

2
sstur