Scroll Box Color

Related:
• HTML Scroll Box
• Scroll Box Borders
• Picture Scroll Box
• HTML Color Chart
• About HTML Colors

Here are copy/paste examples of HTML scroll boxes with color added. Feel free to use the code on this page for your own website. You can also change the values to suit.

Choose your colors

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 -->
<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>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p>

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 -->
<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>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></p>

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 -->
<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>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></p>

Result:

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

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/scroll_box_color.cfm">Scroll Box Color</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites