Scroll Box Color

Background Color

This example changes the background color of the scroll box. In HTML, you change background color using the CSS background-color property:

HTML Code:
<!-- Codes by Quackit.com --><br /> <div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p><br />

Result:

We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.

Text Color

In this example, we also change the color of the text within the scroll box (as well as the background color). Text color is changed using the CSS color property:

HTML Code:
<!-- Codes by Quackit.com --><br /> <div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></p><br />

Result:

We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.

Scrollbar Color

In this example, we change the color of the scroll bars. This is done using the 'scrollbar-base-color' property.

Note that this won't work on all browsers. It should work on Internet Explorer version 5.5 and above, but at the time of writing, it doesn't work in Firefox. So, if you're viewing this page with Firefox, the above scrollbar won't have changed color. More about about colored scrollbars:

HTML Code:
<!-- Codes by Quackit.com --><br /> <div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.</div><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></p><br />

Result:

We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.