Barras de desplazamiento

Hola lucas,

Cambiar la apariencia de las barras de desplazamiento con CSS no es posible en navegadores basados en  Webkit, KHTML, o Gecko.

Sólo hay propiedades CSS para Internet Explorer y las barras de desplazamiento. Aquí tienes un ejemplo que puedes probar en varios navegadores:

http://lineadecodigo.com/wp-content/uploads/2007/11/color-barras-scroll.html

En resumen, no es recomendable, no es un estándar y no es cross-browser.

Las propiedades CSS son:

• scrollbar-3dlight-color, color del borde que hace

  el efecto 3D en la barra de scroll.

• scrollbar-arrow-color, color de las flechas.
• scrollbar-base-color, es el color genérico a

  utilizar por la barra de scroll. Podríamos utilizar únicamente este para

  dar color a la barra.

• scrollbar-darkshadow-color, sombra de la barra de

  progreso.

• scrollbar-face-color, el color de lo que es

  realmente la barra de progreso. Es decir, del bloque que se mueve por la

  barra.

• scrollbar-highlight-color, el color del fondo de

  la barra.

• scrollbar-shadow-color, son los dos botones sobre

  los que podemos pulsar para desplazar la barra.

• scrollbar-track-color, es el color de fondo de la

  barra de scroll.

Si aún así quieres cambiar su aspecto en todos los navegadores deberás utilizar alguna solución javascript como esta:

http://www.hesido.com/web.php?page=customscrollbar

Al parecer es compatible también con el iPhone.

Saludos