Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...

Colorear la barra de Scroll con CSS

Autor: Carlos Carmona

Se dá en ciertas webs que por tener un diseño muy concreto la barra de desplazamiento predefinida del navegador no queda bien, o tal vez queramos cambiar el diseño de la barra para que se vea igual en todos los navegadores, para ello, CSS Microsoft nos brinda la posibilidad de personalizar nuestra barra de scroll, con el siguiente código:

<style type="text/css">
body {
scrollbar-face-color: #006699;
scrollbar-shadow-color: #DEEBF5;
scrollbar-highlight-color: #DEEBF5;
scrollbar-3dlight-color: #5F8ABD;
scrollbar-darkshadow-color: #5F8ABD;
scrollbar-track-color: #F5F5F5;
scrollbar-arrow-color: #FFFFFF;
}
</style>

Donde:

• face: color del primer plano de la barra
• shadow: color de la sombra del fondo
• highlight: color de la luz del cuadro de flecha
• 3dlight: color de la luz 3d
• dark-shadow: color sombra del primer plano
• track: color del fondo de la barra
• arrow: color de la flecha
• base: color base

Nota

Como veis al principio, la palabra CSS está tachada, ya que esto no es CSS. CSS es aquello que especifique como tal el W3C, y este código es código propietario de Microsoft, que aunque usa la misma sintaxis y declaración que CSS, no lo es. Por lo tanto, claro está, esto solo funciona en Internet Explorer.

Saludos.