Scroll Bar Tutorial

Colour Charts


Colour Map

Scroll Bar Scroll Bar magenta Face (magenta)
lime Shadow (green)
white Highlight (white)
red 3D Light (red)
blue Dark Shadow (blue)
yellow Track (yellow)

Troubleshooting

Scroll bar colours will only work in Internet Explorer.


Code

<style type="text/css">
body {
scrollbar-face-color: MAGENTA;
scrollbar-shadow-color: LIME;
scrollbar-highlight-color: WHITE;
scrollbar-3dlight-color: RED;
scrollbar-darkshadow-color: BLUE;
scrollbar-track-color: YELLOW;
scrollbar-arrow-color: BLACK;
}
</style>

Invisible Track (in a scrolling div)

<style type="text/css">
div {
filter: chroma(color=YELLOW);
scrollbar-face-color: MAGENTA;
scrollbar-shadow-color: LIME;
scrollbar-highlight-color: WHITE;
scrollbar-3dlight-color: RED;
scrollbar-darkshadow-color: BLUE;
scrollbar-track-color: YELLOW;
scrollbar-arrow-color: BLACK;
}
</style>

Only Arrows Appear (in a scrolling div)

<style type="text/css">
div {
filter: chroma(color=YELLOW);
scrollbar-arrow-color: BLACK;
scrollbar-face-color: YELLOW;
scrollbar-track-color: YELLOW;
scrollbar-shadow-color: YELLOW;
scrollbar-highlight-color: YELLOW;
scrollbar-3dlight-color: YELLOW;
scrollbar-darkshadow-color: YELLOW;
}
</style>

Invisible Scroll Bar (in a scrolling div)

<style type="text/css">
div {
filter: chroma(color=YELLOW);
scrollbar-arrow-color: YELLOW;
scrollbar-face-color: YELLOW;
scrollbar-track-color: YELLOW;
scrollbar-shadow-color: YELLOW;
scrollbar-highlight-color: YELLOW;
scrollbar-3dlight-color: YELLOW;
scrollbar-darkshadow-color: YELLOW;
}
</style>

Scroll Bar On Left

<style type="text/css">
div {
direction: rtl;
height: 100px;
overflow: auto;
text-align: left;
width: 100px;
}
</style>

Scroll Bar Example

Scroll bar example. Scroll bar example. Scroll bar example. Scroll bar example. Scroll bar example. Scroll bar example.

Scroll Bar Example Code

<style type="text/css">
body {
scrollbar-face-color: #2971CE;
scrollbar-shadow-color: #000080;
scrollbar-highlight-color: #4A8EBD;
scrollbar-3dlight-color: #6495ED;
scrollbar-darkshadow-color: #6495ED;
scrollbar-track-color: #6495ED;
scrollbar-arrow-color: #FFFFFF;
}
</style>