Colour Charts
Colour Map
 |  |  Face (magenta) |
 Shadow (green) | ||
 Highlight (white) | ||
 3D Light (red) | ||
 Dark Shadow (blue) | ||
 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>