Cómo eliminar la flecha de un elemento seleccionado en Firefox

Estoy tratando de diseñar un selectelemento usando CSS3. Estoy obteniendo los resultados que deseo en WebKit (Chrome / Safari), pero Firefox no funciona bien (ni siquiera me estoy molestando con IE). Estoy usando la appearancepropiedad CSS3 , pero por alguna razón no puedo quitar el ícono desplegable de Firefox.

Aquí hay un ejemplo de lo que estoy haciendo: 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;
}

Como puede ver, no estoy tratando de nada lujoso. Solo quiero eliminar los estilos predeterminados y agregar mi propia flecha desplegable. Como dije, excelente en WebKit, no excelente en Firefox. Aparentemente, el -moz-appearance: noneno elimina el elemento desplegable.

¿Algunas ideas? No, JavaScript no es una opción

Bien, sé que esta pregunta es antigua, pero 2 años después, Mozilla no ha hecho nada.

Se me ocurrió una solución simple.

Básicamente, esto elimina todo el formato del cuadro de selección en firefox y envuelve un elemento span alrededor del cuadro de selección con su estilo personalizado, pero solo debe aplicarse a firefox.

Digamos que este es su menú de selección:

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

Y supongamos que la clase css 'css-select' es:

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

En firefox, esto se mostraría con el menú de selección, seguido de la fea flecha de selección de firefox, seguida de su bonita y personalizada apariencia. No es ideal.

Ahora para que esto funcione en Firefox, agregue un elemento span con la clase '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>

Luego arregle el CSS para ocultar la flecha sucia de mozilla con -moz-apariencia: ventana y arroje la flecha personalizada en la clase 'css-select-moz' del span, pero solo haga que se muestre en mozilla, de esta manera:

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

Bastante genial por solo tropezar con este error hace 3 horas (soy nuevo en diseño web y completamente autodidacta). Sin embargo, esta comunidad indirectamente me ha brindado tanta ayuda que pensé que ya era hora de devolver algo.

Solo lo probé en Firefox (mac) versión 18 y luego 22 (después de actualizar).

Todos los comentarios son bienvenidos.

Actualización: esto se solucionó en Firefox v35. Vea la esencia completa para más detalles.

Acabo de descubrir cómo eliminar la flecha de selección de Firefox . El truco es usar una mezcla de -prefix-appearance, text-indenty text-overflow. Es puro CSS y no requiere marcado adicional.

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

Probado en Windows 8, Ubuntu y Mac, últimas versiones de Firefox.

Ejemplo en vivo: http://jsfiddle.net/joaocunha/RUEbp/1/

Más sobre el tema: https://gist.github.com/joaocunha/6273016

El truco que funciona para mí es hacer que el ancho de selección sea superior al 100% y aplicar desbordamiento: oculto

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

Esta es la única forma en este momento de ocultar la flecha desplegable en FF.

Por cierto. si quieres hermosos menús desplegables usa http://harvesthq.github.com/chosen/

Actualización importante:

A partir de Firefox V35, la propiedad de apariencia ahora funciona.

De las notas de la versión oficial de Firefox sobre V35 :

Usando -moz-appearancecon el nonevalor en un cuadro combinado ahora elimine el botón desplegable (error 649849).

Entonces, para ocultar la flecha predeterminada, es tan fácil como agregar las siguientes reglas en nuestro elemento de selección:

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

MANIFESTACIÓN

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>

Hemos encontrado una manera simple y decente de hacer esto. Es cross-browser, degradable y no rompe una publicación de formulario. Primero configure los cuadros de selección opacityen 0.

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

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

esto es para que aún puedas hacer clic en él

Luego haga div con las mismas dimensiones que el cuadro de selección. El div debe estar debajo del cuadro de selección como fondo. Use { position: absolute }y z-indexpara lograr esto.

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

Actualice innerHTML del div con javascript. Easypeasy con jQuery:

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

¡Eso es! Simplemente diseñe su div en lugar del cuadro de selección. No he probado el código anterior, por lo que probablemente necesites modificarlo. Pero espero que entiendas lo esencial.

Creo que esta solución supera {-webkit-appearance: none;}. Lo que los navegadores deberían hacer a lo sumo es dictar la interacción con los elementos del formulario, pero definitivamente no cómo se muestran inicialmente en la página, ya que eso rompe el diseño del sitio.

Intenta de esta manera:

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

Luego, puede usar una imagen diferente como fondo y colocarla:

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

Hay otra forma para los navegadores moz:

text-indent:10px;

Si tiene un ancho definido para seleccionar, esta propiedad empujará el botón de buzón predeterminado debajo del área de selección.

¡Esto funciona para mi! ;)

Si bien no es una solución completa, he descubierto que ...

-moz-appearance: window;

... funciona hasta cierto punto. No puede cambiar el fondo (-color o -image) pero el elemento puede hacerse invisible con color: transparente. No es perfecto, pero es un comienzo y no es necesario reemplazar el elemento de nivel del sistema con uno js.

¡Creo que encontré la solución compatible con FF31!
Aquí hay dos opciones que están bien explicadas en este enlace:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Usé la opción 1: Rodrigo-Ludgero publicó esta solución en Github, incluido un en línea manifestación. Probé esta demostración en Firefox 31.0 y parece que funciona correctamente. Probado en Chrome e IE también. Aquí está el código 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>

y el 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

¡Funciona muy bien para mí!

Desafortunadamente para ti esto es "algo elegante". Normalmente no es el lugar de los autores web para rediseñar elementos de formulario. Muchos navegadores no le permiten diseñarlos a propósito, para que el usuario vea los controles del sistema operativo al que está acostumbrado.

La única forma de hacer esto consistentemente en los navegadores y sistemas operativos es usar JavaScript y reemplazar los selectelementos con "DHTML".

El siguiente artículo muestra tres complementos basados ​​en jQuery que le permiten hacer eso (es un poco viejo, pero no pude encontrar nada actual en este 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; 
    }
}

Estoy diseñando el selecto solo le gusta esto

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

Funciona para mí en FF, Safari y Chrome en todas las versiones que he probado.

En IE pongo:

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

También puede: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }

Sé que esta pregunta es un poco vieja, pero como aparece en Google, esta es una solución "nueva":

appearance: normalParece funcionar bien en Firefox para mí (versión 5 ahora). pero no en Opera e IE8 / 9

Como solución alternativa para Opera e IE9, utilicé el :beforepseudoelector para crear un nuevo cuadro blanco y ponerlo encima de la flecha.

Desafortunadamente, en IE8 esto no funciona. El cuadro se representa correctamente, pero la flecha sobresale de todos modos ...: - /

Usar select:beforefunciona bien en Opera, pero no en IE. Si miro las herramientas del desarrollador, veo que está leyendo las reglas correctamente, y luego simplemente las ignora (están tachadas). Entonces uso un <span class="selectwrap">alrededor de lo real <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;
}

Puede que tenga que ajustar esto un poco, ¡pero esto funciona para mí!

Descargo de responsabilidad: estoy usando esto para obtener una copia impresa de una página web con formularios, así que no necesito crear una segunda página. No soy un 1337 haxx0r que quiere barras de desplazamiento rojas, <marquee>etiquetas y demás :-) Por favor , no aplique un estilo excesivo a los formularios a menos que tenga una muy buena razón.

Usa la pointer-eventspropiedad.

La idea aquí es superponer un elemento sobre la flecha desplegable nativa (para crear uno personalizado) y luego no permitir eventos de puntero en él. [ver esta publicación ]

Aquí hay un FIDDLE que funciona con este método.

Además, en esta respuesta SO discutí este y otro método con mayor detalle.

Esto funciona (probado en Firefox 23.0.1):

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

basándose en la respuesta de @ JoãoCunha, un estilo CSS que es útil para más de un navegador

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

Además de la respuesta de Joao Cunha , este problema ahora está en la Lista de tareas pendientes de Mozilla y está dirigido a la versión 35.

Para aquellos que lo deseen, aquí hay una solución alternativa de Todd Parker, referenciada en el blog de Cunha, que funciona hoy en día:

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

Desde Firefox 35, "-moz-appearance:none " que ya escribió en su código, finalmente elimine el botón de flecha como desee.

Fue un error resuelto desde esa versión.

Muchas discusiones están sucediendo aquí y allá, pero no veo una solución adecuada para este problema. Finalmente, terminé escribiendo un pequeño código Jquery + CSS para hacer este HACK en IE y Firefox.

Calcule el ancho del elemento (SELECT Element) usando Jquery. Agregue un Wrapper Around Select Element y mantenga el desbordamiento oculto para este elemento. Asegúrese de que el ancho de esta envoltura sea appox. 25px menos que el del elemento SELECT. Esto podría hacerse fácilmente con Jquery. Así que ahora nuestro icono se ha ido ...! y es hora de agregar nuestro icono de imagen en el elemento SELECT ... !!! ¡Solo agregue algunas líneas simples para agregar fondo y ya está todo listo! Asegúrese de usar el desbordamiento oculto para el envoltorio externo

Aquí hay una muestra de código que se realizó para Drupal. Sin embargo, también podría usarse para otros eliminando algunas líneas de código que son específicas de 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 solución funciona en todos los navegadores IE, Chrome y Firefox No es necesario agregar hacks de anchos fijos usando CSS. Todo se maneja dinámicamente usando JQuery.!

Más descrito en: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

prueba este css

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

Esta funcionando

La appearancepropiedad de CSS3 no permite nonevalor. Echa un vistazo a la referencia del W3C . Entonces, lo que intenta hacer no es válido (de hecho, Chrome no debería aceptarlo también)

Entonces, desafortunadamente, realmente no tenemos ninguna solución de navegador cruzado para ocultar esa flecha usando CSS puro. Como se señaló, necesitará JavaScript.

Le sugiero que considere usar el complemento selectBox jQuery . Es muy ligero y está muy bien hecho.

Puede aumentar el ancho del cuadro y acercar la flecha a la izquierda de la flecha. Esto le permite cubrir la flecha con un div blanco vacío.

Echa un vistazo: http://jsbin.com/aniyu4/86/edit

¿Aceptarías cambios menores en el html?

Algo así como poner una etiqueta div que contenga la etiqueta select.

Echar un vistazo.

O bien, puede recortar la selección. Algo en la línea de:

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

Esto debería recortar 30 píxeles del lado derecho del cuadro de selección, quitando la flecha. Ahora proporcione una imagen de fondo de 170 px y listo, seleccione con estilo

Es un gran truco, pero -moz-appearance: menulist-textpodría ser el truco.

Yo estaba teniendo el mismo problema. Es fácil hacer que funcione en FF y Chrome, pero en IE (8+ que necesitamos admitir) las cosas se complican. La solución más fácil que pude encontrar para los elementos de selección personalizados que funcionan "en todos los lugares que probé", incluido IE8, es usar .customSelect ()

Un truco útil para mí es configurar la pantalla (selecciona) en inline-flex. Corta la flecha directamente de mi botón de selección. Sin todo el código agregado.

• Solo para Fx. -webkit appearanceTodavía se necesita para Chrome, etc.

La respuesta de Jordan Young es la mejor. Pero si no puede o no desea cambiar su HTML, puede considerar simplemente eliminar la flecha hacia abajo personalizada que se sirve en Chrome, Safari, etc. y dejar la flecha predeterminada de Firefox, pero sin el resultado de flechas dobles. No es ideal, pero es una buena solución rápida que no agrega ningún HTML y no compromete su aspecto personalizado en otros navegadores.

<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 solución que funciona en todos los navegadores que he probado (Safari, Firefox, Chrome). No tenga ningún IEs por ahí, por lo que sería bueno si pudiera probar y comentar:

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

CSS, con imagen codificada 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

Estoy usando: after-element para cubrir la flecha fea. Dado que select no es compatible: después, necesito un contenedor para trabajar. Ahora, si hace clic en la flecha, el menú desplegable no lo registrará ... a menos que su navegador lo admita pointer-events: none, lo que todos, excepto IE10, sí: http://caniuse.com/#feat=pointer-events

Entonces, para mí es perfecto: una solución agradable, limpia y de bajo dolor de cabeza, al menos en comparación con todas las otras opciones que incluyen JavaScript.

tl; dr:

Si los usuarios de IE10 (o inferior) hacen clic en la flecha, no funcionará. Funciona lo suficientemente bien para mí ...

Si no te importa jugar con JS, escribí un pequeño complemento jQuery que te ayuda a hacerlo. Con él no tiene que preocuparse por los prefijos de proveedor.

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

Violín aquí: JS Fiddle

La condición es que debe diseñar la selección desde cero (esto significa establecer el fondo y el borde), pero probablemente quiera hacerlo de todos modos.

Además, dado que la función sustituye la selección original con un div, perderá cualquier estilo realizado directamente en el selector de selección en su CSS. Así que dale una clase al elemento select y dale estilo a la clase.

Admite la mayoría de los navegadores modernos, si desea apuntar a navegadores más antiguos, puede probar una versión anterior de jQuery, pero tal vez tenga que reemplazar on () con bind () en la función (no probado)

Las otras respuestas no parecían funcionar para mí, pero encontré este truco. Esto funcionó para mí (julio de 2014)

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

En mi caso, también tenía un campo de entrada de woocommerce, así que usé esto

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

Actualicé mi respuesta para mostrar select en lugar de input