Cambiar aspecto general

Para ello, sólamente tendremos que modificar el estilo del tag 'select'.

 

select{

width: 15em;
border: 1px solid #D9D9D9;

}

Cambiar la barra de desplazamiento

He encontrado una página desde la que podemos aprender a cambiar el color de nuestros elementos Select fácilmente:

http://iconico.com/CSSScrollbar/

Elegimos la combinación de colores que queremos utilizar, y el programita nos genera el CSS de nuestro elemento directamente.

NOTA: El único problema que tiene, es que no funciona en Firefox.

Dejo un pantallazo de la aplicación web para el que quiera verlo antes.

Pantallazo

Un resumen de los elementos que podemos modificar en la barra de desplazamiento:

  • scrollbar-arrow-color
  • scrollbar-3Dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-face-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-track-color

Por ejemplo, para cambiar la barra de desplazamiento de todos nuestros elementos select, haremos:

 

select{

scrollbar-arrow-color: #FFFFFF;
scrollbar-face-color: #8E6384;

}

Cambiar los elementos option

Para ello, simplemente hay que modificar las opciones del elemento 'option'.

Por ejemplo, para cambiar el color del texto

 

option{

color: #746F7C;

}

Algo que puede ser bastante útil, es definir distintas clases para los elementos option. Por ejemplo supongamos que queremos hacer un elemento select en el que tengamos carreras universitarias. Podríamos diferenciar entre licenciaturas y diplomaturas, para que sea más fácil distinguirlas:

 

option.licenciatura{

background-color: red;

}

option.diplomatura{

background-color: blue;

}

En nuestro código HTML podríamos:

 

<select id='estudios'>

<option class='licenciatura'>Licenciatura en Bellas Artes</option>
<option class='diplomatura'>Diplomado en Estadística</option>

</select>

De esta forma, de un simple vistazo, podremos diferenciar dos tipos de titulaciones en nuestro select.