Personaliza select con CSS3

Hasta hace poco tiempo personalizar un select era bastante rollazo, y muchas veces imposible sin usar javascript, hoy en día han surgido alternativas a través de CSS3 que nos permiten dar la apariencia que queramos antes de clicar en la lista seleccionable desactivando las propiedades comunes de select (appearance) y añadiendo las nuestras tales como una imagen de fondo, en el caso más fácil, o a través de CSS3 darle apariencia nueva con background, shadow o transform , os pongo un ejemplo sencillo:

[syntax_prettify linenums=””]
select {
-webkit-appearance: none;
-moz-appearance:none;
appearance:none;
background: #d9d9d9 url(images/bg-select.jpg) no-repeat right;
border: none;
padding: 10px;
margin: 0;
width: 100%;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius: 0;
}
[/syntax_prettify]

Podéis encontrar más info sobre la personalización de selects aquí:
[button color=”yellow” size=”small” type=”d3″ icon=”heart” target=”_blank” url=”http://bavotasan.com/2011/style-select-box-using-only-css/”]bavotasan[/button] [button color=”yellow” size=”small” type=”d3″ icon=”heart” target=”_blank” url=”http://jsfiddle.net/leaverou/XxkSC/light/”]leaverou[/button]