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

172

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

RussellUresti
fuente
3
Hay un informe de error de esto ahora: bugzilla.mozilla.org/show_bug.cgi?id=649849
sneilan
3
Chosen es una biblioteca de JavaScript que estiliza tus selecciones para ti y las hace lucir realmente elegantes. Podría valer la pena investigarlo, aunque probablemente no resolverá su problema.
stephenmurdoch
Puede encontrar útil esta publicación de blog: red-team-design.com/making-html-dropdowns-not-suck
Rui Marques
1
Parece que han agregado la -moz-appearancepropiedad CSS3, estoy usando -moz-appearance: none;y parece estar funcionando en la versión 35.0.1.
Tony M
Una solución simple sería hacer que el elemento seleccionado sea más ancho que el contenedor. Y ajuste un prefijo de URL de Mozilla para que las opciones sean más amplias en Firefox. @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }
Luke Femur

Respuestas:

78

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.

Jordan Young
fuente
2
Y después de 2 años, esta es la mejor respuesta que se ha publicado para lograr el resultado deseado. Puse un JSBin del código aquí: jsbin.com/aniyu4/2440/edit para que otros lo vean, e hice solo 1 actualización menor de CSS. El intervalo fue más amplio que el seleccionado en FF, debido al relleno derecho, lo que significaba que hacer clic en la flecha no activaba el menú desplegable. Para ajustar esto, coloqué un margen derecho negativo en el elemento de selección para volver a ajustar el ancho del tramo y superponer el ancho de la selección.
RussellUresti
¡Oh por supuesto! Muchas gracias Russell. Realmente me alegro de que esto haya ayudado.
Jordan Young
55
No funcionó para mí en FF 23-24 en Windows (probé el jsbin en el comentario). Terminé usando esta solución alternativa stackoverflow.com/questions/6787667/…
Esteban
44
Ya no funciona en FF 30. Siga adelante y envíe un ticket en el sitio web de Mozilla: bugzilla.mozilla.org/show_bug.cgi?id=649849 . Cuantas más personas se quejen, mayor será la posibilidad de que lo arreglen.
Stan
1
Funciona en FF 31 solo en Mac.
Erwin Wessels
165

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

João Cunha
fuente
1
Tengo un lugar especial en mi corazón generalmente frío para soluciones hacky como esta. Es bastante brillante El único inconveniente es que FF deja un espacio al final del área de texto desplegable (entre el texto real y el final del cuadro de selección), lo que crea un espacio inconsistente entre FF y los otros navegadores, pero eso es solo una pequeña objeción. Buen hallazgo
RussellUresti
Buena captura, @RussellUresti. Pero teniendo en cuenta que toda la idea podría ser proporcionar una flecha modificada, el espacio realmente resulta útil. Jugué un poco con él y agregué padding-right:10px;a la <select>voluntad "empujar" la flecha ahora invisible a la izquierda. En pocas palabras: Firefox OCULTA la flecha, Chrome la quita. Actualizaré mis escritos en consecuencia, gracias por eso.
João Cunha
Agregué un poco de crossbrowser (no he probado en versiones anteriores de IE) como respuesta para que pueda actualizar el suyo
Daniël Tulp
2
La mejor solución para mí, ya -moz-appearence: windowque no funciona con fondos transparentes (dibuja un bg feo en su lugar, al menos en Firefox Linux)
kik
Como esto elimina la flecha por completo, el <select> resultante parece un cuadro de texto y es bastante feo. Por lo tanto, puede volver a agregar una imagen de fondo para que se vea como un menú desplegable: codepen.io/anon/pen/nvfCq
thom_nic
59

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/

opengrid
fuente
66
Esto no tiene ningún efecto para mí. FF 6.0.2
Charlie Schliesser
1
Buena solución para IE también. En mi solución, configuré el elemento div que contiene para que se desborde: oculto y luego amplié el ancho de la selección. Funciona genial.
Mike
@ Charlie S: intente poner el desbordamiento: oculto en el div que lo contiene. Funciona para mí con taht
PierrOz
1
cuando expande el menú desplegable, el desbordamiento: oculto no funciona
Marc
Funciona bien para mi Hace que la lista desplegable sea un poco más amplia que la parte superior, pero ese es un precio que estoy dispuesto a pagar.
Jimbali
26

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>

Danield
fuente
20

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.

Shaun
fuente
66
No es una mala solución, y es similar a un patrón que he visto para diseñar el elemento de entrada de carga de archivos, pero hay varias desventajas. Primero, se basa en JS, que no es ideal. En segundo lugar, si el formulario tiene un botón de reinicio, también debe escribir esa funcionalidad (en este momento, el JS solo escucha el clic del elemento seleccionado, pero no responde a un evento form.reset). Reemplazar el elemento de selección con un div funcionará, pero, idealmente, podríamos simplemente diseñar la apariencia de los elementos de formulario. También hay problemas de accesibilidad relacionados con JS y el comportamiento predeterminado del formulario.
RussellUresti
14

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! ;)

ninja_corp
fuente
6

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.

Stuart Badminton
fuente
Sí, noté que windowtenía ese efecto, desafortunadamente, necesitaba establecer la imagen de fondo. Es lamentable que esto no sea muy bueno en Firefox.
RussellUresti
Es lamentable que no pueda aplicar un reinicio completo para formar elementos, sí. Siempre puedes simular el fondo al tener un elemento debajo de <seleccionar>, lo cual no es ideal, por supuesto.
Stuart Badminton
1
¡Esto es PERFECTO para imprimir! Simplemente configure un media="print"bloque css con select {-moz-appearance: window;}y eliminará las flechas y los fondos de todas las selecciones en FF (para otros navegadores intente la apariencia o -webkit-apariencia) para que se vean como texto sin formato o títulos
FrancescoMM
4

¡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í!

ferocesalatino
fuente
2
Se recomiendan enlaces a recursos externos, pero agregue contexto alrededor del enlace para que sus usuarios tengan una idea de qué es y por qué está allí. Siempre cite la parte más relevante de un enlace importante, en caso de que no se pueda acceder al sitio de destino o se desconecte permanentemente.
Andrew Stubbs
Gracias por sugiere! Perdón por mis faltas!
ferocesalatino
Gracias por editar su pregunta, sin embargo, todavía no responde la pregunta por sí sola . Copie las partes de esos enlaces que ayudarán al interrogador para que puedan resolver su problema con solo leer su Respuesta.
Andrew Stubbs
2

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

RoToRa
fuente
8
No estoy de acuerdo con que esto sea algo elegante, aunque es algo experimental. El objetivo de la appearancepropiedad es dar a los desarrolladores control sobre la apariencia de los elementos del formulario, porque usar JavaScript para eso es una solución horrible. Los navegadores no deben tomar la decisión sobre cómo se ve algo en una página: es una decisión de UX, no una decisión del proveedor del navegador. Desafortunadamente, todavía no está bien soportado. Quizás en otro año.
RussellUresti
No considero "elegante" si quiero que cuando imprima la página, todas las selecciones se vean como un campo sin flechas. Y esa debería ser mi elección, no el navegador o la elección del sistema operativo. Tengo una selección con meses, y cuando se imprime la página, tengo un CSS especial para imprimir que elimina la flecha en la página impresa para que se vea como un título "Marcha" sin flechas que no tengan sentido en una página con precio.
FrancescoMM
2
/* 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; 
    }
}
Todd Bruss
fuente
+20 por sugerir el uso de un pseudo elemento
Zach Saucier
2

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

Alex Moleiro
fuente
1

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.

Martin Tournoij
fuente
3
-moz-appearance: normalno parece ser una opción válida en el Fx 9 y -moz-appearance: none(que es válido) no elimina la flecha hacia abajo.
Robin Winslow
Su solución de lapso superpuesto funciona en IE y FF pero no en Chrome.
cuervo vulcano
: before y: after los pseudo-elementos funcionan solo en elementos que aceptan contenido interno. Ese no es el caso de select, ni la entrada, ni el cargador de archivos, etc. Son excelentes para divs, enlaces, párrafos, etc. La razón de esto es que agregan el contenido no antes / después de EL ELEMENTO en sí, sino antes CONTENIDO. Y un elemento select no es compatible con algo así <select> hi.
João Cunha
1

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.

Danield
fuente
1

Esto funciona (probado en Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}
Ixx
fuente
Me funcionó, pero no me gustó el radio-containervalor de un objeto seleccionado. Examine la referencia de mozilla de apariencia de mozilla para obtener un valor apropiado (solía menulist-textocultar la flecha de selección en FF 31)
sglessard
1

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;
}
Daniël Tulp
fuente
1

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;
}
choque
fuente
1

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.

Luca Detomi
fuente
1

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

usuario3058338
fuente
1

prueba este css

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

Esta funcionando

subindas pm
fuente
0

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.

Erick Petrucelli
fuente
1
Pero noneES un valor que Firefox afirma respaldar: developer.mozilla.org/en/CSS/-moz-appearance Mientras que el diseño de elementos de formulario, en el pasado, solo se podía lograr a través de JavaScript, el objetivo de la appearancepropiedad es alejarse a partir de ese. Los proveedores de navegadores no deberían tomar decisiones de experiencia de usuario para los desarrolladores. Desafortunadamente, parece que todavía es demasiado nuevo para usarlo de manera efectiva.
RussellUresti
1
@RussellUresti, por lo tanto, aunque la descripción del prefijo del proveedor -mozacepta none(incluso si eso funcionó) no sería correcto usarlo. Aún más con respecto a un navegador como Firefox, que siempre se ha jactado de seguir exactamente los estándares.
Erick Petrucelli
0

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

usuario909410
fuente
0

¿Aceptarías cambios menores en el html?

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

Echar un vistazo.

Galled
fuente
0

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

Dusan Smolnikar
fuente
0

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

Luego
fuente
Esto pareció eliminar la flecha de selección para mí, pero como señaló @dendini, también eliminó todos los otros
estilos
0

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 ()

rafaelbiten
fuente
0

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.
Andrew Ice
fuente
2
No parece tener ningún efecto
Chris Nicola
0

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;
  }
}
Squarecandy
fuente
0

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

Sebastian Schmid
fuente
0

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)

Hydde87
fuente
-2

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

Sol
fuente
input.input-text? ¿Qué tiene que ver con la opción de selección y la pregunta que se hace?
dendini