Comment supprimer la flèche d’un élément select dans Firefox

J’essaie de styliser un élément select utilisant CSS3. Je reçois les résultats souhaités dans WebKit (Chrome / Safari), mais Firefox ne joue pas bien (je ne pense même pas à IE). J’utilise la propriété d’ appearance CSS3, mais pour une raison quelconque, je ne peux pas sortir l’icône déroulante de Firefox.

Voici un exemple de ce que je fais: http://jsbin.com/aniyu4/2/edit

 #dropdown { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: transparent url('example.png') no-repeat right center; padding: 2px 30px 2px 2px; border: none; } 

Comme vous pouvez le voir, je n’essaie pas de fantaisie. Je veux juste supprimer les styles par défaut et append ma propre flèche déroulante. Comme je l’ai dit, génial dans WebKit, pas génial dans Firefox. Apparemment, l’ -moz-appearance: none ne se débarrasse de l’élément déroulant.

Des idées? Non, JavaScript n’est pas une option

Bon, je sais que cette question est ancienne, mais 2 ans plus tard et mozilla n’a rien fait.

J’ai trouvé une solution simple.

Cela supprime essentiellement tout formatage de la boîte de sélection de Firefox et encapsule un élément span autour de la zone de sélection avec votre style personnalisé, mais ne devrait s’appliquer qu’à Firefox.

Disons que ceci est votre menu de sélection:

  

Et supposons que la classe css ‘css-select’ soit:

 .css-select { background-image: url('images/select_arrow.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; } 

Dans firefox, cela s’afficherait avec le menu de sélection, suivi de la flèche de firefox select, suivie de votre apparence personnalisée. Pas idéal

Maintenant, pour cela, ajoutez un élément span avec la classe ‘css-select-moz’:

     

Corrigez ensuite le CSS pour masquer la flèche sale de mozilla avec -moz-aspect: window et lancez la flèche personnalisée dans la classe ‘css-select-moz’, mais ne l’affichez que sur mozilla, comme ceci:

 .css-select { -moz-appearance:window; background-image: url('images/select_arrow.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; } @-moz-document url-prefix() { .css-select-moz{ background-image: url('images/select_arrow.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; } } 

Assez sympa pour ne tomber que sur ce bug il y a 3 heures (je suis nouveau dans le webdesign et complètement autodidacte). Cependant, cette communauté m’a indirectement apporté beaucoup d’aide, j’ai pensé qu’il était temps de donner quelque chose en retour.

Je l’ai seulement testé dans firefox (mac) version 18, puis 22 (après avoir mis à jour).

Tous les commentaires sont les bienvenus.

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


Je viens de comprendre comment supprimer la flèche de sélection de Firefox . 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: ''; } 

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

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

Plus sur le sujet: https://gist.github.com/joaocunha/6273016

Le truc qui marche pour moi est de faire sélectionner select width plus de 100% et d’appliquer le overflow: hidden

 select { overflow:hidden; width: 120%; } 

C’est la seule façon de masquer la flèche déroulante dans FF.

BTW si vous voulez de belles listes déroulantes, utilisez http://harvesthq.github.com/chosen/

Mise à jour importante:

À partir de Firefox V35, la propriété d’apparence fonctionne maintenant!

Notes de version officielles de Firefox sur V35 :

L’utilisation de l’ -moz-appearance avec la valeur none sur une liste déroulante supprime maintenant le bouton déroulant (bug 649849).

Donc, maintenant, pour cacher la flèche par défaut, il est aussi facile d’append les règles suivantes sur notre élément select:

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 

DEMO

 select { margin: 50px; border: 1px solid #111; background: transparent; width: 150px; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
  

Nous avons trouvé une façon simple et décente de le faire. C’est inter-navigateur, dégradable, et ne casse pas un article de formulaire. Définissez d’abord l’ opacity de la zone de sélection sur 0 .

 .select { opacity : 0; width: 200px; height: 15px; }  

c’est pour que vous puissiez toujours cliquer dessus

Faites ensuite div avec les mêmes dimensions que la boîte de sélection. Le div doit être placé sous la boîte de sélection comme arrière-plan. Utilisez { position: absolute } et z-index pour y parvenir.

 .div { width: 200px; height: 15px; position: absolute; z-index: 0; } 
{the text of the the current selection updated by javascript}

Mettez à jour le innerHTML du div avec javascript. Easypeasy avec jQuery:

 $('.select').click(function(event)) { $('.div').html($('.select option:selected').val()); } 

C’est tout! Juste style de votre div au lieu de la boîte de sélection. Je n’ai pas testé le code ci-dessus, vous aurez donc probablement besoin de le modifier. Mais j’espère que vous obtenez l’essentiel.

Je pense que cette solution bat {-webkit-appearance: none;} . Ce que les navigateurs doivent faire au maximum, c’est dicter l’interaction avec les éléments de formulaire, mais certainement pas comment ils sont affichés initialement sur la page, car cela rompt la conception du site.

Essayez de cette façon:

 -webkit-appearance: button; -moz-appearance: button; 

Ensuite, vous pouvez utiliser une image différente comme arrière-plan et la placer:

 background-image: url(images/select-arrow.png); background-position: center right; background-repeat: no-repeat; 

Il existe un autre moyen pour les navigateurs moz:

 text-indent:10px; 

Si vous avez une largeur définie à sélectionner, cette propriété poussera le bouton de sélection par défaut sous la zone de sélection.

Ça marche pour moi! 😉

Bien que ce ne soit pas une solution complète, j’ai trouvé que…

 -moz-appearance: window; 

… Fonctionne dans une certaine mesure. Vous ne pouvez pas changer le fond (-color ou -image) mais l’élément peut être rendu invisible avec la couleur: transparent. Pas parfait mais c’est un début et vous n’avez pas besoin de remplacer l’élément de niveau système par un js.

Je pense avoir trouvé la solution compatible avec FF31 !!!
Voici deux options bien expliquées sur ce lien:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

J’ai utilisé l’option 1: Rodrigo-Ludgero a publié cette correction sur Github, y compris une démo en ligne. J’ai testé cette démo sur Firefox 31.0 et il semble fonctionner correctement. Testé sur Chrome et IE également. Voici le code html:

     Custom Select    

et le css:

 .custom-select { background-color: #fff; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 0 2em; padding: 0; position: relative; width: 100%; z-index: 1; } .custom-select:hover { border-color: #999; } .custom-select:before { color: #333; display: block; font-family: 'FontAwesome'; font-size: 1em; height: 100%; line-height: 2.5em; padding: 0 0.625em; position: absolute; top: 0; right: 0; text-align: center; width: 1em; z-index: -1; } .custom-select select { background-color: transparent; border: 0 none; box-shadow: none; color: #333; display: block; font-size: 100%; line-height: normal; margin: 0; padding: .5em; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-select select::-ms-expand { display: none; /* to ie 10 */ } .custom-select select:focus { outline: none; } /* little sortingck for custom select elements in mozilla firefox 17/06/2014 @rodrigoludgero */ :-moz-any(.custom-select):before { background-color: #fff; /* this is necessary for overcome the caret default browser */ pointer-events: none; z-index: 1; /* this is necessary for overcome the pseudo element */ } 

http://jsbin.com/pozomu/4/edit

Ça marche très bien pour moi!

Malheureusement pour vous, c’est “quelque chose de chic”. Normalement, ce ne sont pas les auteurs Web qui créent des éléments de formulaire. De nombreux navigateurs ne vous permettent pas de les personnaliser, afin que les utilisateurs puissent voir les contrôles auxquels ils sont habitués.

La seule façon de le faire de manière cohérente sur les navigateurs et les systèmes d’exploitation est d’utiliser JavaScript et de remplacer les éléments select éléments “DHTML”.

L’article suivant montre trois plug-ins basés sur jQuery qui vous permettent de le faire (c’est un peu vieux, mais je ne pouvais rien trouver actuellement)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

 /* Try this in FF30+ Covers up the arrow, turns off the background */ /* still lets you style the border around the image and allows selection on the arrow */ @-moz-document url-prefix() { .yourClass select { text-overflow: ''; text-indent: -1px; -moz-appearance: none; background: none; } /*fix for popup in FF30 */ .yourClass:after { position: absolute; margin-left: -27px; height: 22px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; content: url('../images/yourArrow.svg'); pointer-events: none; overflow: hidden; border-right: 1px solid #yourBorderColour; border-top: 1px solid #yourBorderColour; border-bottom: 1px solid #yourBorderColour; } } 

Je stylise la sélection aime juste ça

  

Cela fonctionne pour moi dans FF, Safari et Chrome dans toutes les versions que j’ai testées.

Dans IE je mets:

  select::-ms-expand { display: none; } /*to remove in all selects*/ 

Vous pouvez aussi: .votreclasse :: – ms-expand {display: none; } .yourid :: – ms-exapan {display: none; }

Je sais que cette question est un peu ancienne, mais comme elle apparaît sur Google, il s’agit d’une “nouvelle” solution:

appearance: normal Semble fonctionner correctement dans Firefox pour moi (version 5 maintenant). mais pas à Opera et IE8 / 9

En guise de solution de contournement pour Opera et IE9, j’ai utilisé le pseudo-sélecteur :before pour créer une nouvelle boîte blanche et la placer en haut de la flèche.

Malheureusement, dans IE8 cela ne fonctionne pas . La boîte est rendue correctement, mais la flèche dépasse juste de toute façon …: – /

Utiliser select:before fonctionne bien dans Opera, mais pas dans IE. Si je regarde les outils de développement, je vois qu’il lit correctement les règles, puis les ignore (ils sont barrés). J’utilise donc un autour de la réelle.

 select { -webkit-appearance: normal; -moz-appearance: normal; appearance: normal; } .selectwrap { position: relative; } .selectwrap:before { content: ""; height: 0; width: 0; border: .9em solid red; background-color: red; position: absolute; right: -.1em; z-index: 42; } 

Vous devrez peut-être le modifier un peu, mais cela fonctionne pour moi!

Disclaimer: J’utilise ceci pour obtenir une copie papier d’une page Web avec des formulaires, donc je n’ai pas besoin de créer une deuxième page. Je ne suis pas un 1337 haxx0r qui veut des barres de défilement rouges, des balises et autres joyeusetés!

Utilisez la propriété pointer-events .

L’idée ici est de superposer un élément sur la flèche déroulante native (pour créer notre élément personnalisé), puis d’interdire les événements de pointeur. [voir cet article ]

Voici un FIDDLE fonctionnel utilisant cette méthode.

En outre, dans cette réponse SO, j’ai discuté de cette méthode et d’une autre méthode plus en détail.

Cela fonctionne (testé sur Firefox 23.0.1):

 select { -moz-appearance: radio-container; } 

en s’appuyant sur la réponse de @ JoãoCunha, un style CSS utile pour plus d’un navigateur

 select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; text-indent: 0.01px; text-overflow: ''; } /*for IE10*/ select::-ms-expand { display: none; } 

Suite à la réponse de Joao Cunha , ce problème est désormais sur la liste de tâches de Mozilla et vise la version 35.

Pour ceux qui le désirent, voici une solution de contournement de Todd Parker, référencée sur le blog de Cunha, qui fonctionne aujourd’hui:

http://jsfiddle.net/xvushd7x/

HTML:

  

CSS:

 /* Label styles: style as needed */ label { display:block; margin-top:2em; font-size: 0.9em; color:#777; } /* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */ .custom-select { position: relative; display:block; margin-top:0.5em; padding:0; } /* These are the "theme" styles for our button applied via separate button class, style as you like */ .button { border: 1px solid #bbb; border-radius: .3em; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); background: #f3f3f3; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ } /* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */ .custom-select select { width:100%; margin:0; background:none; border: 1px solid transparent; outline: none; /* Prefixed box-sizing rules necessary for older browsers */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* Remove select styling */ appearance: none; -webkit-appearance: none; /* Font size must the 16px or larger to prevent iOS page zoom on focus */ font-size:16px; /* General select styles: change as needed */ font-family: helvetica, sans-serif; font-weight: bold; color: #444; padding: .6em 1.9em .5em .8em; line-height:1.3; } /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */ .custom-select::after { content: ""; position: absolute; width: 9px; height: 8px; top: 50%; right: 1em; margin-top:-4px; background-image: url(http://soffr.miximages.com/html/select-arrow.png); background-repeat: no-repeat; background-size: 100%; z-index: 2; /* These hacks make the select behind the arrow clickable in some browsers */ pointer-events:none; } /* Hover style */ .custom-select:hover { border:1px solid #888; } /* Focus style */ .custom-select select:focus { outline:none; box-shadow: 0 0 1px 3px rgba(180,222,250, 1); background-color:transparent; color: #222; border:1px solid #aaa; } /* Set options to normal weight */ .custom-select option { font-weight:normal; } 

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

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

Beaucoup de discussions se passent ici et là mais je ne vois pas de solution appropriée à ce problème. Enfin terminé en écrivant un petit code Jquery + CSS pour faire ce HACK sur IE et Firefox.

Calculer la largeur de l’élément (élément SELECT) en utilisant Jquery. Ajoutez un élément d’encapsulation autour de l’élément et gardez le débordement caché pour cet élément. Assurez-vous que la largeur de ce wrapper est appox. 25px moins que celui de l’élément SELECT. Cela pourrait être facilement fait avec Jquery. Alors maintenant, notre icône a disparu ..! et il est temps d’append notre icône d’image sur l’élément SELECT … !!! Il suffit d’append quelques lignes simples pour append du fond et vous êtes tous faits .. !! Assurez-vous d’utiliser le dépassement de capacité caché pour l’enveloppe extérieure,

Voici un exemple de code qui a été réalisé pour Drupal. Cependant, vous pouvez également utiliser d’autres lignes en supprimant quelques lignes de code spécifiques à Drupal.

 /* * Jquery Code for Removing Dropdown Arrow. * @by: North Web Studio */ (function($) { Drupal.behaviors.nwsJS = { attach: function(context, settings) { $('.form-select').once('nws-arrow', function() { $wrap_width = $(this).outerWidth(); $element_width = $wrap_width + 20; $(this).css('width', $element_width); $(this).wrap('
'); $(this).parent('.nws-select').css('width', $wrap_width); }); } }; })(jQuery);
 /* * CSS Code for Removing Dropdown Arrow. * @by: North Web Studio */ .nws-select { border: 1px solid #ccc; overflow: hidden; background: url('../images/icon.png') no-repeat 95% 50%; } .nws-select .form-select { border: none; background: transparent; } 

La solution fonctionne sur tous les navigateurs Internet Explorer, Chrome et Firefox. Aucun besoin d’append des hachures de largeurs fixes en utilisant CSS. Tout est géré dynamicment en utilisant JQuery.!

Plus Description: – http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

La propriété d’ appearance de CSS3 n’autorise none valeur. Regardez la référence du W3C . Donc, ce que vous essayez de faire n’est pas valide (en effet, Chrome ne devrait pas accepter aussi).

Malheureusement, nous n’avons pas de solution multi-navigateur pour masquer cette flèche à l’aide de CSS pur. Comme indiqué, vous aurez besoin de JavaScript.

Je vous suggère de penser à utiliser le plugin selectBox jQuery . C’est très léger et bien fait.

Vous pouvez augmenter la largeur de la boîte et rapprocher la flèche de la gauche de la flèche. cela vous permet alors de couvrir la flèche avec un div blanc vide.

Jetez un coup d’oeil: http://jsbin.com/aniyu4/86/edit

Accepteriez-vous des modifications mineures au code HTML?

Quelque chose comme mettre une balise div contenant la balise select.

Regarde.

Ou, vous pouvez découper la sélection. Quelque chose du genre:

 select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); } 

Cela devrait couper 30px du côté droit de la boîte de sélection, en enlevant la flèche. Fournissez maintenant une image de fond 170px et le tour est joué

C’est un énorme hack, mais l’ -moz-appearance: menulist-text pourrait faire l’affaire.

J’avais le même problème. Il est facile de le faire fonctionner sur FF et Chrome, mais sur IE (8+ que nous devons prendre en charge), les choses se compliquent. La solution la plus simple que je puisse trouver pour les éléments de sélection personnalisés fonctionnant “partout où j’ai essayé”, y compris IE8, est d’utiliser .customSelect ()

Un hack utile pour moi est de régler l’affichage (selects) sur inline-flex . Coupe la flèche à droite de mon bouton de sélection. Sans tout le code ajouté.

  • Pour Fx seulement. -webkit appearance encore nécessaire pour Chrome, etc …

La réponse de Jordan Young est la meilleure. Mais si vous ne pouvez pas ou ne voulez pas modifier votre code HTML, vous pouvez simplement supprimer la flèche vers le bas personnalisée de Chrome, Safari, etc. et laisser la flèche par défaut de Firefox – mais sans double flèches. Pas idéal, mais une bonne solution rapide qui n’ajoute aucun code HTML et ne compromet pas votre apparence personnalisée dans les autres navigateurs.

  

CSS:

 select { background-image: url('images/select_arrow.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; } @-moz-document url-prefix() { select { background-image: none; } } 

hackity hack … une solution qui fonctionne dans tous les navigateurs que j’ai testés (Safari, Firefox, Chrome). Il n’y a pas d’IE qui traîne, alors ce serait bien si vous pouviez tester et commenter:

 

CSS, avec une image encodée en url:

 .wrapper { position:relative; width:200px; } .wrapper:after { content:""; display: block; position: absolute; top:1px; height:28px; right:1px; width:16px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==); pointer-events: none; } select { width: 100%; padding:3px; margin: 0; border-radius: 0; border:1px solid black; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; float:none!important; background:white; font-size:13px; line-height: 1em; height: 30px; padding:6px 20px 6px 10px; } 

http://codepen.io/anon/pen/myPEBy

J’utilise l’élément: after-element pour couvrir la flèche laide. Puisque select ne supporte pas: après, j’ai besoin d’un wrapper pour travailler avec. Maintenant, si vous cliquez sur la flèche, le menu déroulant ne l’enregistre pas … à moins que votre navigateur ne supporte les pointer-events: none , sauf pour IE10: http://caniuse.com/#feat=pointer- événements

Donc, pour moi, c’est parfait – une solution agréable, propre et peu maux de tête, au moins comparée à toutes les autres options qui incluent le javascript.

tl; dr:

Si les utilisateurs d’IE10 (ou inférieur) cliquent sur la flèche, cela ne fonctionnera pas. Fonctionne assez bien pour moi …

Si cela ne vous dérange pas de jouer avec JS, j’ai écrit un petit plugin jQuery qui vous aide à le faire. Avec cela, vous n’avez pas besoin de vous soucier des préfixes de fournisseurs.

  $.fn.magicSelectBox = function() { var $e = this; $e.each(function() { var $select = $(this); var $magicbox = $('
').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox'); var $innermagicbox = $('
').css({ position: 'relative', height: '100%' }); var $text = $('').css({ position: 'absolute' }).text($select.find("option:selected").text()); $select.attr('class', null).css({ width: '100%', height: '100%', opacity: 0, position: 'absolute' }).on('change', function() { $text.text($select.find("option:selected").text()); }); $select.parent().append($magicbox); $innermagicbox.append($text, $select); $magicbox.append($innermagicbox); }); return $e; };

Violon ici: JS Fiddle

La condition est que vous devez définir le style à partir de zéro (cela signifie définir le fond et la bordure), mais vous voudrez probablement le faire quand même.

De plus, puisque la fonction remplace la sélection d’origine par une div, vous perdrez tout style effectué directement sur le sélecteur de sélection de votre CSS. Donc, donnez à l’élément select une classe et donnez un style à la classe.

Prend en charge la plupart des navigateurs modernes, si vous souhaitez cibler des navigateurs plus anciens, vous pouvez essayer une ancienne version de jQuery, mais vous devrez peut-être remplacer on () par bind () dans la fonction (non testé)

essayez ce css

 select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; } 

Ça marche

Les autres réponses ne semblaient pas fonctionner pour moi, mais j’ai trouvé ce piratage. Cela a fonctionné pour moi (juillet 2014)

 select { -moz-appearance: textfield !important; } 

Dans mon cas, j’avais aussi un champ de saisie woocommerce, donc j’ai utilisé cette

 .woocommerce .quantity input.qty { -moz-appearance: textfield !important; } 

Mise à jour de ma réponse pour afficher select plutôt que input