Personalización de apariencia Seleccionar flecha para compatibilidad con el navegador cruzado

en un esfuerzo por mejorar la estética de un elemento seleccionado, es común reemplazar la flecha predeterminada con una imagen personalizada. Sin embargo, lograr esta compatibilidad con el navegador cruzado puede ser un desafío.

Para abordar este problema, considere incorporar el siguiente código en su CSS:

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

Esta adición suprime la apariencia de flecha predeterminada en todos los navegadores principales.

Desafortunadamente, Firefox no admite completamente esta característica hasta la versión 35. Para versiones anteriores, es necesaria una solución. Uno de estos enfoques, demostrado en un ejemplo de JSFIDDLE, implica ocultar la flecha original y reemplazarla con una imagen de fondo que imita la funcionalidad de la flecha cuando el elemento seleccionado se desplaza.