CSS » Scroll bar colors

Explanation

The code below would look like this. Yes, ugly color composition, but it's easier to see what belongs where.

Main scroll bar

Insert this code chunk on your hl page (internal css). Don't forget to put the style tags at the top and bottom of the chunk.

body {
scrollbar-face-color: #C00000;
scrollbar-highlight-color: #40FF40;
scrollbar-3dlight-color: #FFFF00;
scrollbar-shadow-color: #40FFFF;
scrollbar-darkshadow-color: #FF40FF;
scrollbar-track-color: #800080;
scrollbar-arrow-color: #FF6600;
}

Scroll box scrolls

You can make the scroll box scrolls have different colors than the main scroll bar. Insert the code on your hl page where you want the scroll box to show (you don't need the style tags at the top and bottom):

<div style="overflow: auto; height: 227px; width: 153px;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
">

Text inside scroll box goes here

</div>

You can change the width and height of the box if wanted, and the scroll colors

Transparent scrolls

You can make the scroll bars inside the scroll box transparent (will not work on the main scroll bars):

<div style="overflow: auto; height: 227px; width: 153px;
filter: chroma(color=#0A0A0A);
scrollbar-track-color: #0A0A0A">

This will make the track bar transparent. If you want the other scroll things to be transparent, insert the things you want transparent the same way (e.g. scrollbar-face-color:#0A0A0A;). Note that #0A0A0A is not a transparent color, it's the filter that makes it transparent.

Scroll code generator

Click generators in the top menu, then choose scroll bar colors. The generator will help you generate a scroll bar color code.