Elementos <select> con estilo
Para cambiar el aspecto de los elementos <select> tenemos que eliminar primero los estilos que vienen predefinidos "de fabrica".
select {
background: transparent;
border: none;
font-size: 14px;
height: 30px;
padding: 5px;
width: 250px;
}
En Google Chrome, los <select> enfocados ( on focus ) tienen una "sombra" azulada. Para eliminarla utilizamos esta regla:
select:focus{ outline: none;}
/* elimina la "sombra" azulada que aparece en Google Chrome */El botón que controla la aparición y la desaparición de los <option> es imposible de cambiar. De hecho este botón tiene solo una función estética, ya que podemos desplegar las opciones haciendo clic en cualquier punto del <select>. Así que podemos taparlo y construir otro en su lugar.
Para taparlo ponemos el <select> dentro de una .caja cuya anchura width es más pequeña que la anchura del <select>.
.caja {
margin:20px auto;
border:1px solid #d9d9d9;
height:30px;
width: 230px;
overflow: hidden;
position:relative;
}
Y después construimos el nuevo "botón" utilizando el pseudo-elemento ::after. En este ejemplo utilizamos content:"\025be"; que es este símbolo: ▾, pero podemos utilizar cualquier otro símbolo, o incluso imágenes: content: url(flecha.gif);.
Más símbolos ASCII y Unicode para utilizar en el HTML, javaScript y CSS
.caja::after{
content:"\025be";
display:table-cell;
text-align:center;
padding-top:7px;
width:30px;
height:30px;
background-color:#d9d9d9;
position:absolute;
top:0;
right:0px;
pointer-events: none;
}La propiedad pointer-events – nueva en CSS3 – permite controlar como se comportan los elementos html respecto a los eventos del ratón.
En nuestro caso, el pseudo-elemento ::after, que está encima del <select>, interfiere en la funcionalidad de este y no nos deja desplegar las opciones. Para que esto no pase utilizamos pointer-events: none, para inhabilitar los eventos del ratón encima del pseudo-elemento.
.caja {
margin:20px auto 40px auto;
border:1px solid #d9d9d9;
height:30px;
overflow: hidden;
width: 230px;
position:relative;
}
select {
background: transparent;
border: none;
font-size: 14px;
height: 30px;
padding: 5px;
width: 250px;
}
select:focus{ outline: none;}
.caja::after{
content:"\025be";
display:table-cell;
padding-top:7px;
text-align:center;
width:30px;
height:30px;
background-color:#d9d9d9;
position:absolute;
top:0;
right:0px;
pointer-events: none;
}