Come rimuovere la freccia da un elemento selezionato in Firefox

Sto cercando di modellare un selectelemento usando CSS3. Sto ottenendo i risultati che desidero in WebKit (Chrome / Safari), ma Firefox non funziona bene (non mi preoccupo nemmeno di IE). Sto usando la appearanceproprietà CSS3 , ma per qualche motivo non riesco a scuotere l'icona a discesa da Firefox.

Ecco un esempio di quello che sto facendo: 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;
}

Come puoi vedere, non sto provando niente di speciale. Voglio solo rimuovere gli stili predefiniti e aggiungere la mia freccia a discesa. Come ho detto, ottimo in WebKit, non eccezionale in Firefox. Apparentemente, il -moz-appearance: nonenon elimina l'elemento a discesa.

Qualche idea? No, JavaScript non è un'opzione

Va bene, so che questa domanda è vecchia, ma 2 anni fa e Mozilla non hanno fatto nulla.

Ho escogitato una semplice soluzione.

Questo essenzialmente rimuove tutta la formattazione della casella di selezione in firefox e avvolge un elemento span attorno alla casella di selezione con il tuo stile personalizzato, ma dovrebbe applicarsi solo a firefox.

Supponiamo che questo sia il menu selezionato:

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

E supponiamo che la classe css 'css-select' sia:

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

In firefox, questo verrebbe visualizzato con il menu di selezione, seguito dalla brutta freccia di selezione di Firefox, seguita dalla tua bella personalizzata. Non ideale

Ora per farlo funzionare in Firefox, aggiungi un elemento span con 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>

Quindi correggi il CSS per nascondere la freccia sporca di mozilla con -moz-aspect: window e lancia la freccia personalizzata nella classe span 'css-select-moz', ma fallo visualizzare su mozilla, in questo modo:

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

Abbastanza bello per essermi imbattuto in questo bug solo 3 ore fa (sono nuovo di web design e completamente autodidatta). Tuttavia, questa comunità mi ha indirettamente fornito così tanto aiuto, pensavo fosse giunto il momento di dare qualcosa in cambio.

L'ho testato solo in firefox (mac) versione 18 e poi 22 (dopo l'aggiornamento).

Tutti i feedback sono benvenuti.

Aggiornamento: risolto in Firefox v35. Vedi l' essenza completa per i dettagli.

Ho appena capito come rimuovere la freccia selezionata da Firefox . Il trucco è usare un mix di -prefix-appearance, text-indente text-overflow. È puro CSS e non richiede markup extra.

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

Testato su Windows 8, Ubuntu e Mac, ultime versioni di Firefox.

Esempio live: http://jsfiddle.net/joaocunha/RUEbp/1/

Maggiori informazioni sull'argomento: https://gist.github.com/joaocunha/6273016

Il trucco che funziona per me è rendere la larghezza selezionata superiore al 100% e applicare l'overflow: nascosto

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

Questo è l'unico modo in questo momento per nascondere la freccia del menu a discesa in FF.

BTW. se desideri bellissimi menu a discesa, utilizza http://harvesthq.github.com/chosen/

Aggiornamento importante:

A partire da Firefox V35 la proprietà aspetto ora funziona !!

Dalle note di rilascio ufficiali di firefox su V35 :

L'utilizzo -moz-appearancecon il nonevalore in una casella combinata ora rimuove il pulsante a discesa (bug 649849).

Quindi ora per nascondere la freccia predefinita - è facile come aggiungere le seguenti regole al nostro elemento 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;
}

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

Abbiamo trovato un modo semplice e decente per farlo. È cross-browser, degradabile e non interrompe un post del modulo. Innanzitutto impostare la casella di selezione opacitysu 0.

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

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

questo è così puoi ancora fare clic su di esso

Quindi crea div con le stesse dimensioni della casella di selezione. Il div dovrebbe trovarsi sotto la casella di selezione come sfondo. Usa { position: absolute }e z-indexper raggiungere questo obiettivo.

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

Aggiorna il HTML interno del div con javascript. Easypeasy con jQuery:

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

Questo è tutto! Dai uno stile al tuo div invece che alla casella di selezione. Non ho testato il codice sopra, quindi probabilmente dovrai modificarlo. Ma spero che tu abbia capito.

Penso che questa soluzione sia migliore {-webkit-appearance: none;}. Ciò che i browser dovrebbero fare al massimo è dettare l'interazione con gli elementi del modulo, ma sicuramente non il modo in cui inizialmente vengono visualizzati nella pagina in quanto interrompono la progettazione del sito.

Prova in questo modo:

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

Quindi, puoi utilizzare un'immagine diversa come sfondo e posizionarla:

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

C'è un altro modo per i browser moz:

text-indent:10px;

Se hai una larghezza definita da selezionare, questa proprietà spingerà il pulsante a discesa predefinito nell'area di selezione.

Per me funziona! ;)

Pur non essendo una soluzione completa, ho scoperto che ...

-moz-appearance: window;

... funziona in una certa misura. Non puoi cambiare lo sfondo (-colore o -immagine) ma l'elemento può essere reso invisibile con il colore: trasparente. Non perfetto ma è un inizio e non è necessario sostituire l'elemento a livello di sistema con uno js.

Penso di aver trovato la soluzione compatibile con FF31 !!!
Ecco due opzioni che sono ben spiegate a questo link:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Ho usato l'opzione 1: Rodrigo-Ludgero ha pubblicato questa correzione su Github, incluso un online demo. Ho provato questa demo su Firefox 31.0 e sembra funzionare correttamente. Testato anche su Chrome e IE. Ecco il codice 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>

e il 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

Funziona molto bene per me!

Purtroppo per te questo è "qualcosa di speciale". Normalmente non è il posto degli autori web a riprogettare gli elementi del modulo. Molti browser non ti consentono di modellarli di proposito, in modo che l'utente possa vedere i controlli del sistema operativo a cui sono abituati.

L'unico modo per farlo costantemente su browser e sistemi operativi è utilizzare JavaScript e sostituire il select elementi con quelli "DHTML".

L'articolo seguente mostra tre plugin basati su jQuery che ti consentono di farlo (è un po 'vecchio, ma non sono riuscito a trovare nulla di attuale in questo momento)

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

Sto progettando la selezione piace solo questo

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

Funziona per me in FF, Safari e Chrome in tutte le versioni che ho testato.

In IE ho inserito:

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

Inoltre puoi: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }

So che questa domanda è un po 'vecchia, ma dal momento che si presenta su Google, e questa è una "nuova" soluzione:

appearance: normalSembra funzionare bene in Firefox per me (versione 5 ora). ma non in Opera e IE8 / 9

Come soluzione alternativa per Opera e IE9, ho usato il :before pseudoselettore per creare una nuova scatola bianca e posizionarla in cima alla freccia.

Sfortunatamente, in IE8 non è così funziona. Il riquadro è reso correttamente, ma la freccia sporge comunque ...: - /

L'uso select:beforefunziona perfettamente in Opera, ma non in IE. Se guardo gli strumenti di sviluppo, vedo che sta leggendo correttamente le regole e poi le ignora (sono cancellate). Quindi uso un <span class="selectwrap">around <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;
}

Potrebbe essere necessario modificarlo un po ', ma questo funziona per me!

Disclaimer: sto usando questo per ottenere una buona copia di una pagina Web con moduli, quindi non ho bisogno di creare una seconda pagina. Non sono un 1337 haxx0r che desidera barre di scorrimento rosse, <marquee>tag e quant'altro :-) Per favore , non applicare uno stile eccessivo ai moduli a meno che tu non abbia una buona ragione.

Usa la pointer-eventsproprietà

L'idea qui è di sovrapporre un elemento sopra la freccia a discesa nativa (per crearne uno personalizzato) e quindi non consentire eventi puntatore su di esso. [vedi questo post ]

Ecco un FIDDLE funzionante che utilizza questo metodo.

Inoltre, in questa risposta SO ho discusso in dettaglio questo e un altro metodo.

Funziona (testato su Firefox 23.0.1):

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

basandosi sulla risposta di @ JoãoCunha, uno stile css utile per più di un browser

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

Oltre alla risposta di Joao Cunha , questo problema è ora nella ToDo List di Mozilla ed è destinato alla versione 35.

Per coloro che desiderano, ecco una soluzione alternativa di Todd Parker, referenziata sul blog di Cunha, che funziona oggi:

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

Da Firefox 35 "-moz-appearance:none " che hai già scritto nel tuo codice, infine rimuovi il pulsante freccia come desiderato.

È stato risolto un bug da quella versione.

Molte discussioni accadono qua e là ma non vedo una soluzione adeguata a questo problema. Finalmente è finito scrivendo un piccolo codice Jquery + CSS per fare questo HACK su IE e Firefox.

Calcola la larghezza dell'elemento (SELEZIONA elemento) usando Jquery. Aggiungi un wrapper attorno a Seleziona elemento e Mantieni nascosto l'overflow per questo elemento. Assicurarsi che la larghezza di questo wrapper sia appox. 25px in meno rispetto a SELECT Element. Questo potrebbe essere facilmente fatto con Jquery. Quindi ora la nostra icona è andata ..! ed è tempo di aggiungere la nostra icona immagine sull'elemento SELECT ... !!! Basta aggiungere alcune semplici righe per aggiungere lo sfondo e sei fatto. .. !! Assicurati di utilizzare l'overflow nascosto per l'involucro esterno,

Ecco un esempio di codice che è stato fatto per Drupal. Tuttavia, potrebbe essere utilizzato anche per altri, rimuovendo alcune righe di codice specifiche per 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 soluzione funziona su tutti i browser IE, Chrome e Firefox Non è necessario aggiungere hack a larghezza fissa tramite CSS. Tutto viene gestito dinamicamente con JQuery.!

Più descritto a: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

prova questo css

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

Sta funzionando

La appearanceproprietà di CSS3 non consente il nonevalore. Dai un'occhiata al riferimento W3C . Quindi, ciò che stai cercando di fare non è valido (in effetti Chrome non dovrebbe accettarlo anche).

Quindi sfortunatamente non abbiamo davvero alcuna soluzione cross-browser per nascondere quella freccia usando CSS puro. Come indicato, avrai bisogno di JavaScript.

Ti suggerisco di prendere in considerazione l'utilizzo del plug-in jQuery selectBox . È molto leggero e ben fatto.

È possibile aumentare la larghezza della casella e spostare la freccia più vicino a sinistra della freccia. questo ti consente quindi di coprire la freccia con un div bianco vuoto.

Dai un'occhiata: http://jsbin.com/aniyu4/86/edit

Accetteresti piccole modifiche all'html?

Qualcosa come mettere un tag div contenente il tag select.

Guarda.

Oppure, puoi tagliare la selezione. Qualcosa sulla falsariga di:

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

Questo dovrebbe tagliare 30 pixel del lato destro della casella di selezione, togliendo la freccia. Ora fornisci un'immagine di sfondo da 170 px e voilà, in stile seleziona

È un trucco enorme, ma -moz-appearance: menulist-textpotrebbe fare il trucco.

Stavo avendo lo stesso problema. È facile farlo funzionare su FF e Chrome, ma su IE (8+ che dobbiamo supportare) le cose si complicano. La soluzione più semplice che ho trovato per gli elementi di selezione personalizzati che funzionano "ovunque ho provato", incluso IE8, sta usando .customSelect ()

Un trucco utile per me è impostare il (seleziona) display su inline-flex. Taglia la freccia dal mio pulsante di selezione. Senza tutto il codice aggiunto.

• Solo per Fx. -webkit appearanceancora necessario per Chrome, ecc ...

La risposta di Jordan Young è la migliore. Ma se non puoi o non vuoi cambiare il tuo HTML, potresti considerare semplicemente di rimuovere la freccia in giù personalizzata offerta a Chrome, Safari, ecc. E di lasciare la freccia predefinita di Firefox - ma senza conseguenti doppie frecce. Non ideale, ma una buona soluzione rapida che non aggiunge alcun HTML e non compromette il tuo aspetto personalizzato in altri browser.

<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 ... una soluzione che funziona in tutti i browser che ho testato (Safari, Firefox, Chrome). Non avere IE in giro, quindi sarebbe bello poter testare e commentare:

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

CSS, con immagine codificata in 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

Sto usando: after-element per coprire la brutta freccia. Poiché select non supporta: dopo, ho bisogno di un wrapper con cui lavorare. Ora, se fai clic sulla freccia, il menu a discesa non lo registra ... a meno che il tuo browser non supporti pointer-events: none, cosa che tutti tranne IE10- fa: http://caniuse.com/#feat=pointer-events

Quindi per me è perfetto: una soluzione piacevole, pulita e con pochi mal di testa, almeno rispetto a tutte le altre opzioni che includono JavaScript.

tl; dr:

Se gli utenti di IE10 (o inferiore) fanno clic sulla freccia, non funzionerà. Funziona abbastanza bene per me ...

Se non ti dispiace armeggiare con JS, ho scritto un piccolo plugin jQuery che ti aiuta a farlo. Con esso non devi preoccuparti dei prefissi del fornitore.

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

Fiddle qui: JS Fiddle

La condizione è che devi modellare la selezione da zero (questo significa impostare lo sfondo e il bordo), ma probabilmente vorrai farlo comunque.

Inoltre, poiché la funzione sostituisce la selezione originale con un div, perderai qualsiasi stile fatto direttamente sul selettore di selezione nel tuo CSS. Quindi assegna all'elemento select una classe e disegna la classe.

Supporta la maggior parte dei browser moderni, se vuoi scegliere come target browser più vecchi, puoi provare una versione precedente di jQuery, ma forse devi sostituire on () con bind () nella funzione (non testato)

Le altre risposte non sembravano funzionare per me, ma ho trovato questo trucco. Questo ha funzionato per me (luglio 2014)

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

Nel mio caso, avevo anche un campo di input woocommerce, quindi l'ho usato

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

Aggiornato la mia risposta per mostrare select piuttosto che input