Cómo aplicarle estilos CSS al elemento select en HTML

Si alguna vez han diseñado formularios con CSS se habrán dado cuenta que en realidad cada elemento se puede estilizar de la forma que más queramos, pero si están en Mac OS X se habrán dado cuenta que hay uno que nomás no se deja tocar ni un pixel. Me refiero al elemento select, o al listbox como quieran llamarlo. Es un elemento que es difícil de aplicar estilos porque Apple y Microsoft en general son los que diseñan en sus sistemas operativos y por ende como se comportan estos elementos, y ya que toman el estilo visual de cada sistema operativo pues muchas veces quitar ese estilo no es una tarea tan sencilla.

Pero por suerte estuve investigando y encontré que hay una forma de quitarle la apariencia al elemento select y poder aplicarle nuestros propios estilos CSS para que podamos darle un mejor feeling a nuestros formularios. No se pierdan el tutorial porque de verdad, es una simple línea de código.

Demo del tutorial

HTML

Para nuestro HTML no necesitamos mas que nuestro elemento como tal y ya. En este tutorial vamos a definir un estilo para todos los elementos select que haya en nuestra página, pero si quieres cambiar y tener varios estilos por cada select (algo que personalmente no recomendaría) puedes colocarle una clase o id para identificarlo.

CSS

Para el CSS lo más importante además de tener los estilos de fondo, fuente, borde y sombra es entender que está la propiedad –webkit-appareance, la que permite quitarle el estilo visual predeterminado a nuestro elemento, y de esa forma que el navegador renderice con base en nuestras propias propiedades, algo bastante sencillo.

Es curioso porque esto funciona solo para Chrome y Safari, y aunque curiosamente en Firefox está el sufijo no funcionó como esperaba, así que esta es una alternativa pero de todas formas para que funcione correctamente tendrían que validar primero el navegador para después aplicar el estilo, de lo contrario como en este caso le puse una imagen que sirviera de flecha en IE o Mozilla u Opera se va a ver la flechita por defecto.