Comment supprimer la flèche d'un élément de sélection dans Firefox

J'essaie de styliser un selectélément en utilisant CSS3. J'obtiens les résultats que je souhaite dans WebKit (Chrome / Safari), mais Firefox ne joue pas bien (je ne suis même pas dérangé par IE). J'utilise la appearancepropriété CSS3 , mais pour une raison quelconque, je ne peux pas secouer 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'essaye rien d'extraordinaire. Je veux simplement supprimer les styles par défaut et ajouter ma propre flèche déroulante. Comme je l'ai dit, super dans WebKit, pas génial dans Firefox. Apparemment, le -moz-appearance: nonene supprime pas l'élément déroulant.

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

D'accord, je sais que cette question est vieille, mais 2 ans plus tard et Mozilla n'ont rien fait.

J'ai trouvé une solution de contournement simple.

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

Dites que c'est votre menu de sélection:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

Et supposons que la classe css 'css-select' est:

.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 vilaine flèche de sélection de Firefox, suivie de votre belle apparence personnalisée. Pas idéal.

Maintenant, pour que cela se passe dans Firefox, ajoutez un élément span avec la classe 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Ensuite, corrigez le CSS pour masquer la flèche sale de mozilla avec -moz-apparence: window et lancez la flèche personnalisée dans la classe de span '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;
  }
} 

Plutôt cool de 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 fourni tellement d'aide, j'ai pensé qu'il était temps que je donne quelque chose en retour.

Je ne l'ai testé que dans la version 18 de Firefox (mac), puis 22 (après la mise à jour).

Tous les commentaires sont les bienvenus.

Mise à jour: cela a été corrigé dans Firefox v35. Voir l' essentiel 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 de -prefix-appearance, text-indentet text-overflow. 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/

En savoir plus sur le sujet: https://gist.github.com/joaocunha/6273016

L'astuce qui fonctionne pour moi est de rendre la largeur de sélection supérieure à 100% et d'appliquer le débordement: hidden

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

C'est le seul moyen pour le moment de masquer la flèche déroulante dans FF.

BTW. si vous voulez de beaux menus déroulants, utilisez http://harvesthq.github.com/chosen/

Mise à jour importante:

Depuis Firefox V35, la propriété d'apparence fonctionne désormais !!

À partir des notes de publication officielles de Firefox sur V35 :

En utilisant -moz-appearanceavec la nonevaleur sur une liste déroulante, supprimez maintenant le bouton déroulant (bogue 649849).

Alors maintenant, pour masquer la flèche par défaut, c'est aussi simple que d'ajouter les règles suivantes sur notre élément de sélection:

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;
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Nous avons trouvé un moyen simple et décent de le faire. C'est cross-browser, dégradable et ne casse pas un post de formulaire. Commencez par définir la zone de sélection opacitysur 0.

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

<select class='select'>
    <option value='foo'>bar</option>    
</select>

c'est pour que vous puissiez toujours cliquer dessus

Ensuite, créez un div avec les mêmes dimensions que la boîte de sélection. Le div doit se trouver sous la boîte de sélection comme arrière-plan. Utilisez { position: absolute }et z-indexpour y parvenir.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Mettez à jour le fichier innerHTML de la div avec javascript. Easypeasy avec jQuery:

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

C'est tout! Stylisez simplement votre div au lieu de la zone 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 comprenez l'essentiel.

Je pense que cette solution bat {-webkit-appearance: none;}. Ce que les navigateurs devraient tout au plus faire est de dicter l'interaction avec les éléments du formulaire, mais certainement pas la manière dont ils s'affichent 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 défini une largeur à sélectionner, cette propriété poussera le bouton de la boîte de dépôt 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 l'arrière-plan (-color ou -image) mais l'élément peut être rendu invisible avec color: 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 élément js.

Je pense avoir trouvé la solution compatible avec FF31 !!!
Voici deux options qui sont 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 posté ce correctif sur Github, dont un en ligne démo. J'ai testé cette démo sur Firefox 31.0 et elle semble fonctionner correctement. Testé également sur Chrome et IE. Voici le code html:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

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 trick 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

Cela fonctionne très bien pour moi!

Malheureusement pour vous c'est "quelque chose d'extraordinaire". Normalement, ce n'est pas aux auteurs Web de redessiner les éléments de formulaire. De nombreux navigateurs ne vous permettent pas de les styliser, afin que l'utilisateur puisse voir les contrôles du système d'exploitation auxquels il est habitué.

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 le select éléments par des éléments «DHTML».

L'article suivant montre trois plugins basés sur jQuery qui vous permettent de le faire (c'est un peu vieux, mais je n'ai rien trouvé de courant pour le moment)

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

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

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 également: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {affichage: aucun; }

Je sais que cette question est un peu ancienne, mais comme elle apparaît sur google, et c'est une "nouvelle" solution:

appearance: normalSemble bien fonctionner dans Firefox pour moi (version 5 maintenant). mais pas dans Opera et IE8 / 9

Comme solution de contournement pour Opera et IE9, j'ai utilisé le :beforepseudosélecteur pour créer une nouvelle boîte blanche et la placer au-dessus de la flèche.

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

L'utilisation select:beforefonctionne 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 simplement (elles sont barrées). J'utilise donc un <span class="selectwrap">autour du réel <select>.

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 modifier un peu cela, mais cela fonctionne pour moi!

Avis de non-responsabilité: J'utilise ceci pour obtenir une bonne 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 haxx0r 1337 qui veut des barres de défilement rouges, des <marquee>balises, etc. :-) Veuillez ne pas appliquer de style excessif aux formulaires à moins que vous n'ayez une très bonne raison.

Utilisez la pointer-eventspropriété.

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

Voici un FIDDLE fonctionnel utilisant cette méthode.

De plus, dans cette réponse SO, j'ai discuté de ceci 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 qui est 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 maintenant sur la liste des tâches de Mozilla et est ciblé pour la version 35.

Pour ceux qui le souhaitent, 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:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

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://filamentgroup.com/files/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 enfin le bouton fléché comme vous le souhaitez.

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

Beaucoup de discussions se déroulent ici et là mais je ne vois pas de solution appropriée à ce problème. Enfin fini par écrire un petit code Jquery + CSS pour faire ce HACK sur IE et Firefox.

Calculez la largeur de l'élément (SELECT Element) à l'aide de Jquery. Ajoutez un wrapper autour de l'élément Select et gardez le dépassement caché pour cet élément. Assurez-vous que la largeur de ce wrapper est appox. 25px de moins que celui de SELECT Element. Cela pourrait être facilement fait avec Jquery. Alors maintenant, notre icône est partie ..! et il est temps d'ajouter notre icône d'image sur l'élément SELECT ... !!! Ajoutez simplement quelques lignes simples pour ajouter un arrière-plan et vous avez terminé .. !! Assurez-vous d'utiliser le débordement caché pour l'emballage extérieur,

Voici un exemple de code qui a été fait pour Drupal. Cependant pourrait être utilisé pour d'autres également 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('<div class="nws-select"></div>');
        $(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 IE, Chrome et Firefox Pas besoin d'ajouter des hachages de largeurs fixes à l'aide de CSS. Tout est géré dynamiquement à l'aide de JQuery.!

Plus décrit sur: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

essayez ce css

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

Ça marche

La appearancepropriété de CSS3 n'autorise pas la nonevaleur. Jetez un œil à la référence W3C . Donc, ce que vous essayez de faire n'est pas valide (en effet Chrome ne devrait pas l'accepter aussi).

Malheureusement, nous n'avons vraiment aucune solution multi-navigateurs pour masquer cette flèche en utilisant du CSS pur. Comme indiqué, vous aurez besoin de JavaScript.

Je vous suggère d'envisager d'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 œil: http://jsbin.com/aniyu4/86/edit

Accepteriez-vous des modifications mineures du code HTML?

Quelque chose comme mettre une balise div contenant la balise de sélection.

Regarde.

Ou, vous pouvez 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 supprimant la flèche. Fournissez maintenant une image d'arrière-plan de 170 pixels et le tour est joué, sélectionnez le style

C'est un énorme hack, mais -moz-appearance: menulist-textça 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 j'ai pu trouver pour les éléments de sélection personnalisés qui fonctionnent "partout où j'ai essayé", y compris IE8, utilise .customSelect ()

Une astuce utile pour moi est de définir l'affichage (sélectionne) sur inline-flex. Coupe la flèche à droite de mon bouton de sélection. Sans tout le code ajouté.

• Pour Fx uniquement. -webkit appearanceencore 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 envisager de supprimer simplement la flèche vers le bas personnalisée servie à Chrome, Safari, etc. et de laisser la flèche par défaut de Firefox - mais sans doubles flèches. Pas idéal, mais une bonne solution rapide qui n'ajoute pas de HTML et ne compromet pas votre apparence personnalisée dans d'autres navigateurs.

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

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). N'ayez aucun IE qui traîne, donc ce serait bien si vous pouviez tester et commenter:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS, avec 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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+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: après pour couvrir la flèche laide. Puisque select ne prend pas en charge: après, j'ai besoin d'un wrapper avec lequel travailler. Maintenant, si vous cliquez sur la flèche, la liste déroulante ne l'enregistrera pas ... à moins que votre navigateur pointer-events: nonene le prenne en charge , ce que tout le monde sauf IE10- fait: http://caniuse.com/#feat=pointer-events

Donc, pour moi, c'est parfait - une solution agréable, propre et sans maux de tête, du moins par rapport à toutes les autres options qui incluent javascript.

tl; dr:

Si les utilisateurs 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 lui, vous n'avez pas à vous soucier des préfixes des fournisseurs.

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').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 styliser la sélection à partir de zéro (cela signifie définir l'arrière-plan et la bordure), mais vous voulez probablement le faire quand même.

De plus, puisque la fonction remplace la sélection d'origine par un div, vous perdrez tout style effectué directement sur le sélecteur de sélection dans votre CSS. Donnez donc à l'élément select une classe et stylisez 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 peut-être devrez-vous remplacer on () par bind () dans la fonction (non testé)

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

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

Dans mon cas, j'avais également un champ de saisie woocommerce donc j'ai utilisé ceci

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

Mise à jour de ma réponse pour afficher sélectionner plutôt que saisir