Seleccione el cambio de estilo de flecha

Estoy tratando de reemplazar la flecha de una selección con una imagen mía. Incluyo la selección en un div con el mismo tamaño, establezco el fondo de la selección como transparente y estoy incluyendo una imagen (con el mismo tamaño que la flecha) en la esquina superior derecha de la div como fondo.

Solo funciona en Chrome.

enter image description here

¿Cómo puedo hacer que funcione en Firefox e IE9 donde obtengo esto?

enter image description here

.styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body { background-color: #333333; color: #FFFFFF; } .block label { color: white; } 
     

Select steam

Has intentado algo como ésto:

 .styled-select select { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; } 

No lo he probado, pero debería funcionar.

EDITAR : Parece que Firefox no admite esta característica hasta la versión 35 ( lea más aquí )

Hay una solución aquí , eche un vistazo a jsfiddle en esa publicación.

Aquí hay una solución elegante que usa un lapso para mostrar el valor.

El diseño es así:

 

JsFiddle

Trabajando con una sola clase:

 select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; -webkit-appearance: none; background-position-x: 244px; } 

http://jsfiddle.net/qhCsJ/4120/

He configurado una select con una flecha personalizada similar a la respuesta de Julio, sin embargo, no tiene un ancho establecido y usa una svg como imagen de fondo. ( arrow_drop_down de los arrow_drop_down de material-ui)

 select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position-x: 100%; background-position-y: 5px; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 2rem; padding: 1rem; padding-right: 2rem; } 

enter image description here

Si lo necesitas también funciona en IE actualiza la flecha svg a base64 y agrega lo siguiente:

 select::-ms-expand { display: none; } background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+); 

Esto funcionaría bien especialmente para aquellos que usan Bootstrap, probado en las últimas versiones de navegador:

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Some browsers will not display the caret when using calc, so we put the fallback first */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */ } 
  

Comprueba este es jacky, simple como eso:

  • Establecer -prefix-appearance en none para eliminar los estilos
  • Use text-indent para “empujar” el contenido un poco hacia la derecha
  • Finalmente, establezca text-overflow en una cadena vacía. Todo lo que se extiende más allá de su ancho se convertirá en … ¡nada! Y eso incluye la flecha.

Ahora puedes modelarlo como quieras 🙂

Aquí está mi ejemplo jsfiddle: http://jsfiddle.net/AEt5k/1/

Diseñe la etiqueta con CSS y use los eventos de puntero:

  

y el CSS relativo es

 label:after { content:'\25BC'; display:inline-block; color:#000; background-color:#fff; margin-left:-17px; /* remove the damn :after space */ pointer-events:none; /* let the click pass trough */ } 

Acabo de utilizar una flecha hacia abajo aquí, pero puede establecer un bloque con una imagen de fondo. Aquí hay una fea muestra de violín: https://jsfiddle.net/1rofzz89/

Está funcionando en todos los navegadores:

 select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ background-position-x: 244px; }