css - chrome - ¿Cuál es el valor correcto "-moz-apariencia" para ocultar la flecha desplegable de un elemento<select>

webkit firefox chrome

Question

Estoy intentando darle estilo a la flecha desplegable de un elemento <select> con CSS solamente, funciona perfectamente en Chrome / Safari:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url(''./select-arrow1.png'') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

Que rinde maravillosamente como se ve aquí

De acuerdo con esa lógica, lo único que tenía que hacer para que funcionara en Firefox era agregar todo -webkit-* cosas como -moz-* :

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

Funciona al 99%, el único problema es que la flecha desplegable predeterminada no desaparece y permanece en la parte superior de la imagen de fondo como se ve aquí.

Se ve como -moz-appearance: button; no funciona para un elemento <select> . También -moz-appearance: none; no tiene efecto para eliminar la flecha desplegable predeterminada.

Entonces, ¿cuál es el valor correcto para -moz-appearance para eliminar la flecha desplegable predeterminada?

Actualizaciones:

11 de diciembre de 2014 : deja de inventar nuevos hacks . Después de 4 años y medio, -moz-appearance:none está empezando a funcionar desde Firefox 35. Aunque el moz-appearance:button todavía está roto, no es necesario que lo uses de todos modos. Aquí hay un ejemplo de trabajo muy básico.

28 de abril de 2014 : el css hack mencionado funcionó durante un par de meses, pero desde principios de abril de 2014, este error vuelve a introducirse en Firefox 31.0.a1 Nightly en todas las plataformas.

Answer 1

En Mac OS -moz-appearance: window; eliminará la flecha de los documentos MDN aquí: developer.mozilla.org/en-US/docs/CSS/-moz-appearance . Probado en Firefox 13 en Mac OS X 10.8.2. También vea: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21 .

Answer 2

Esto es chicos! ¡FIJO!

Espera y mira: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

o solución

Para aquellos que se preguntan:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

En primer lugar, debido a que el error tiene un montón de spam hostil, crea un lugar de trabajo hostil para cualquiera que sea asignado a este.

En segundo lugar, la persona que tiene la capacidad de hacer esto (que incluye la reescritura) se ha asignado a otro proyecto (b2g) por el momento y no tendrá tiempo hasta que ese proyecto esté más cerca de completarse.

Tercero, incluso cuando esa persona tenga tiempo otra vez, no hay garantía de que esto sea una prioridad porque, a pesar de que Webkit tenga esto, rompe las especificaciones de cómo se supone que debe funcionar (Esto es lo que me dijeron, yo no personalmente saber la especificación)

Ahora vea https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

La página ya no existe y el error no se solucionó, pero una solución aceptable vino de João Cunha, ¡ustedes pueden agradecerle por ahora!

Answer 3

Intenta poner opacidad: 0; su elemento seleccionado será invisible, pero las opciones estarán visibles cuando haga clic en él.

Answer 4

Para deshacerse de la flecha desplegable predeterminada, use:

-moz-appearance: window; 

Answer 5

Si bien aún no puedes conseguir que Firefox elimine la flecha desplegable (consulta la publicación de MatTheCat), puedes ocultar tu imagen de fondo "estilizada" para que no se muestre en Firefox.

-moz-background-position: -9999px -9999px!important;

Esto lo ubicará fuera del marco, dejándolo con la flecha de cuadro de selección predeterminada, mientras mantiene la versión estilizada en Webkit.

Answer 6

Vale la pena probar estas 2 opciones a continuación mientras todavía estamos esperando la solución en FF35:

select {
    -moz-appearance: scrollbartrack-vertical;
}

o

select {
    -moz-appearance: treeview;
}

Simplemente ocultarán cualquier imagen de fondo de flecha que haya agregado al estilo personalizado de su elemento de selección. Así que obtienes una flecha de navegador estándar de pantano en lugar de una horrible combinación de ambas flechas de navegador y tu propia flecha personalizada.

Answer 7

está funcionando al agregar:

seleccione {ancho: 115%}

Answer 8

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

== cómo ocultar la flecha de selección en Firefox ==

Acabo de descubrir cómo hacerlo. El truco es usar una mezcla de -prefix-appearance , text-indent y text-overflow . Es puro CSS y no requiere marcado adicional.

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

Para resumir, al empujarlo un poco hacia la derecha, el desbordamiento elimina la flecha. Bastante limpio, ¿eh?

Más detalles sobre esta esencia que acabo de escribir. Probado en Ubuntu, Mac y Windows, todos con versiones recientes de Firefox.