Después de una extensa búsqueda, he encontrado dos razonable de enfoques para la creación personalizada de pure-CSS seleccione desplegables.
Enfoque #1. Artículo Original aquí
Ajustar el elemento select en un div con un ancho fijo (digamos 150 píxeles) y rebosadero oculto.
A continuación, dar el elemento select de un ancho de 20 píxeles mayor que la div.
El resultado es que el valor predeterminado de la flecha desplegable del elemento select será cortada, y se puede poner cualquier imagen de fondo que desee en el lado derecho de la div.
La ventaja de este enfoque es que es cross-browser (Internet Explorer 8 y versiones posteriores, WebKity Gecko). Sin embargo, la desventaja de este enfoque es que el desplegable de opciones sobresale en el lado derecho (por el 20 píxeles, la cual escondimos... porque los elementos de opción que tomar el ancho de la selección elment).
[Cabe señalar, sin embargo, que si la costumbre de seleccionar elemento es necesario para MÓVILES de este problema de arriba, no se aplica - debido a la forma en que cada teléfono de forma nativa abre el elemento select. Así que para móvil, esta es probablemente la mejor solución.]
[He aquí un demo de este enfoque]
Enfoque #2 post Original aquí
El uso de la pointer-events
de la propiedad.
La idea aquí es la superposición de un elemento en el nativo de la flecha desplegable (para crear nuestro custom) y, a continuación, rechazar los eventos de puntero sobre él.
Ventaja: No más marcado, funciona bien en WebKit y Gecko.
Desventaja: Internet Explorer no admite pointer-events
. (incluso a Internet Explorer 10), lo que significa que usted no haga clic en la costumbre de flecha. También, otro (obvio) desventaja de este método es que no puede orientar su nueva flecha de la imagen con un efecto de hover o cursor de la mano, porque sólo hemos deshabilitado los eventos de puntero sobre ellos!
Sin embargo, con este método se puede utilizar Modernizador o comentarios condicionales para Internet Explorer volver al estándar, construido en flecha.
Esto, en mi opinión, es la mejor solución disponible hasta la fecha (al menos hasta la appearance
de la propiedad se hace más ancha soporte de navegador).
Aquí es un violín (que utiliza el segundo método, junto con Internet Explorer condicionales) donde usted puede verificar esto.
Siendo que Internet Explorer 10 no admite conditional comments
ya: Si desea utilizar el enfoque #2, usted probablemente debería usar Modernizr. Sin embargo, todavía es posible excluir el puntero-eventos CSS de Internet Explorer 10 con un CSS hack descrito en Stack Overflow pregunta ¿Cómo puedo destino de Internet Explorer 10 para determinadas situaciones, como Internet Explorer-CSS específica o Internet Explorer específicas de código JavaScript?.