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

Update: cela a été corrigé dans Firefox v35. Voir le "151990920 complet" gist pour plus de détails.

trouvé comment faire pour supprimer la flèche sélectionner à partir de Firefox . Le truc est d'utiliser un mélange de -prefix-appearance , text-indent et text-overflow . Il s'agit de CSS pur et ne nécessite pas de majoration 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.

Live example: http://jsfiddle.net/joaocunha/RUEbp/1/

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

l'astuce qui fonctionne pour moi est de faire sélectionner la largeur plus de 100% et appliquer débordement: caché

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

c'est la seule façon de cacher dropdown arrow en FF.

BTW. si vous voulez de belles chutes utiliser http://harvesthq.github.com/chosen /

Mise À Jour Importante:

à partir de Firefox V35 la propriété d'apparence fonctionne maintenant !!

à Partir de de firefox notes officielles sur V35 :

utilisant -moz-appearance avec la valeur none sur un combobox maintenant supprimer le bouton de dépose (bogue 649849).

donc maintenant afin de cacher la flèche par défaut - c'est aussi facile que d'ajouter la suivante règles sur notre élément select:

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

DÉMO

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 formulaire post. Sélectionnez d'abord opacity dans la case de sélection, puis 0 .

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

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

il s'agit de sorte que vous pouvez toujours cliquer sur elle

puis faire div avec les mêmes dimensions que la boîte de sélection. Le div doit être placé sous la boîte select comme arrière-plan. Pour ce faire, utilisez { position: absolute } et z-index .

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

mise à Jour de la div à l'innerHTML avec javascript. Easypeasy avec jQuery:

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

C'est ça! Il suffit de styliser votre div au lieu de la boîte de sélection. Je n'ai pas testé le code ci-dessus donc vous aurez 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 devraient faire tout au plus est dicter l'interaction avec les éléments de formulaire, mais certainement pas comment leur initialement affiché sur la page comme ça casse la conception du site.

Essayer de cette façon:

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

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

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

il y a une autre façon pour les navigateurs moz:

text-indent:10px;

si vous avez une largeur définie à sélectionner, cette propriété va appuyer sur le bouton dropbox par défaut sous la zone select.

ça me va! ;)

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 (- couleur 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 js one.

je pense que j'ai trouvé la solution compatible avec FF31!!!

Voici deux options qui sont bien expliquées à 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, 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. 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 la 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



Il fonctionne très bien pour moi!

malheureusement pour vous ce est quelque chose de fantaisiste". Normalement, ce n'est pas l'endroit où les auteurs web doivent reconcevoir les éléments du formulaire. De nombreux navigateurs ne vous laissent volontairement pas les coiffer, afin que l'utilisateur puisse voir les commandes du système D'exploitation auxquelles ils sont habitués.

la seule façon de le faire de façon uniforme sur les navigateurs et les systèmes d'exploitation, est D'utiliser JavaScript et de remplacer les éléments select par" DHTML".

article suivant show trois plugins basés sur jQuery qui vous permettent de faire cela (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 suis le style de l'sélectionnez aime tout simplement cette

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

cela fonctionne pour moi EN FF, Safari et Chrome dans toutes les versions que j'ai testées.

Dans IE j'ai mis:

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

vous pouvez aussi: .yourclass::-ms-développez {display: none; } .yourid:: - ms-exapan {display: none; }

je sais que cette question est un peu vieux, mais depuis il tourne sur google, et c'est une "nouvelle" solution:

appearance: normal Semble bien fonctionner dans Firefox pour moi (version 5). mais pas dans L'Opéra et IE8/9

comme solution de contournement pour Opera et IE9, j'ai utilisé le pseudo-sélecteur :before pour créer une nouvelle boîte blanche et mettre ça sur la flèche.

malheureusement, dans IE8 ce ne fonctionne pas . Le la boîte est rendu correctement, mais la flèche sort de toute façon... :- /

à l'Aide select:before fonctionne très bien dans l'Opéra, mais pas sous IE. Si je regarde les outils de développement, je vois que c'est lire les règles correctement, et puis les ignore (ils sont barrés). Donc j'utilise un <span class="selectwrap"> autour de l'actuel <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 pouvez avoir besoin de modifier un peu, mais cela fonctionne pour moi!

clause de non-responsabilité: J'utilise cela pour obtenir un beau papier d'une page web avec des formes tellement 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 étiquettes <marquee> , et ainsi de suite :-) S'il vous plaît ne pas appliquer un style excessif aux formulaires sauf si vous avez une très bonne raison.

utilisez la propriété pointer-events .

l'idée ici est de superposer un élément au-dessus de la flèche native drop down (pour créer notre personnalisé) et ensuite de rejeter les événements pointeur sur elle. [voir ce post ]

voici un travail violon utilisant cette méthode.

Aussi, dans cette SORTE de réponse j'ai discuté de cela et une autre méthode dans plus en détail.

ceci fonctionne (testé sur Firefox 23.0.1):

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

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 à réponse de Joao Cunha , ce problème est maintenant sur la liste de ToDo de Mozilla et est ciblé pour ver 35.

pour ceux qui le désirent, voici un contournement par Todd Parker, référencé 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, finalement supprimer le bouton flèche comme désiré.

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

beaucoup de Discussions ont lieu ici et là, mais je ne vois pas de solution appropriée pour ce problème. Finalement fini par écrire un petit code Jquery + CSS pour faire ce piratage sur IE & Firefox.

calculer la largeur de L'élément (sélectionner L'élément) en utilisant Jquery. Ajoutez une enveloppe autour de L'élément Select et gardez le débordement caché pour cet élément. Assurez-vous que la largeur de cette enveloppe est apox. 25px moins que celui de L'élément SELECT. Cela pourrait être facilement fait avec Jquery. Alors Maintenant Notre L'icône a Disparu..! et il est temps d'ajouter notre icône d'image sur L'élément SELECT...!!! Juste ajouter quelques lignes simples pour l'ajout d'arrière-plan et vous êtes tous Fait..!! Assurez-vous d'utiliser débordement caché pour emballage extérieur,

voici un exemple de Code qui a été fait pour Drupal. Cependant pourrait être utilisé pour d'autres aussi en enlevant quelques lignes de code qui est Drupal spécifique.

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

Solution fonctionne sur tous les navigateurs IE, Chrome & Firefox Aucun nécessité d'ajouter des braquages de largeurs fixes à l'aide de CSS. Tout est géré dynamiquement avec JQuery.!

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

la propriété appearance de CSS3 ne permet pas la valeur none . Jetez un oeil à 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).

alors malheureusement nous n'avons vraiment pas de solution de Cross-browser pour cacher cette flèche en utilisant des CSS purs. Comme indiqué, vous aurez besoin de JavaScript.

je vous suggère d'utiliser selectBox jQuery plugin . Il est très léger et bien fait.

vous pouvez augmenter la largeur de la boîte et déplacer la flèche plus à gauche de la flèche. cela vous permet ensuite de couvrir la flèche avec une div blanche vide.

Avoir un coup d'oeil: http://jsbin.com/aniyu4/86/edit

accepteriez-vous des modifications mineures au html?

quelque Chose comme mettre une balise div contenant la balise select.

regardez.

ou, vous pouvez clip Le select. 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. Maintenant, fournir une image d'arrière-plan de 170px et voila, select

c'est un énorme piratage, mais -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 facile que j'ai pu trouver pour des éléments de sélection sur mesure qui fonctionne "partout où j'ai essayé", y compris IE8, est d'utiliser .customSelect ()

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

• pour Fx seulement. -webkit appearance toujours nécessaire pour le Chrome, etc...

la réponse de Jordan Young est la meilleure. Mais si vous ne pouvez pas ou ne voulez pas changer votre HTML, vous pourriez envisager de simplement supprimer la flèche personnalisée vers le bas servi à Chrome, Safari, etc et laissant Flèche par défaut de firefox - mais sans double flèches résultant. Pas idéal, mais une bonne solution rapide qui n'ajoute pas de HTML et ne compromet pas votre look personnalisé 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). Il n'y a pas D'IEs dans le coin, donc ce serait bien si vous pouviez tester et commenter:

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

CSS, avec codé url de l'image:

.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 le :after-element pour couvrir la flèche laide. Depuis select ne supporte pas :après, j'ai besoin d'un wrapper pour travailler avec. Maintenant, si vous cliquez sur la flèche, le dropdown ne l'enregistrera pas ... à moins que votre navigateur ne supporte pointer-events: none , 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, avec peu de maux de tête, au moins par rapport à toutes les autres options qui incluent javascript.

tl; dr:

si IE10 (ou plus bas) utilisateurs cliquez sur la flèche, il ne fonctionnera pas. Fonctionne assez bien pour moi...

si ça ne vous dérange pas de jouer avec JS, j'ai écrit un petit plugin jQuery qui vous aide à le faire. Avec elle, vous ne devez pas vous soucier des préfixes de vendeur.

 $.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 le select à partir de zéro (cela signifie définir l'arrière-plan et la frontière), mais vous voulez probablement le faire de toute façon.

étant donné que la fonction remplace original, sélectionnez un div, vous perdrez tout style fait directement sur l'sélectionnez sélecteur 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 voulez cibler les navigateurs plus anciens, vous pouvez essayer une version plus ancienne de jQuery, mais peut-être devez remplacer on() avec bind() dans la fonction (non testé)

essayez cette css

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

son fonctionnement

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 d'entrée woocommerce donc j'ai utilisé ce

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

mise à Jour de ma réponse à afficher sélectionnez plutôt que