martes, 24 de septiembre de 2013

Select estilizado

Select estilizado

Es un poco difícil aplicar estilos a un select. Algunas ideas:
  • appearance: none permite ocultar la flecha de despliegue, de modo que se podría colocar una imagen como background. Sin embargo, por alguna razón no funciona en FF ni IE (al 2013/09/24).
  • Colocar el select dentro de un label ayuda a definir dos bloques select:before y select:after que se pueden usar para definir una flecha con ayuda de triángulos CSS. Estando dentro del label, pointer-events: none permite que se comporten como parte del select también.

Demo:

Referencias: