Scroll Box Color

This page contains scroll box color code. Feel free to copy and paste the scroll box color code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

When you create your HTML scroll boxes, you can choose to display them in different colors. The following code examples demonstrate how to change the color of your scroll box, the text that goes into the scrollbox, and the actual scrollbars.

Scroll Box Color Code

This example changes the color of the scroll box. It does this by using the CSS background-color property. In this case, we use background-color: GreenYellow

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <div style="border:1px solid black;width:150px;height:150px;overflow:scroll;background-color: GreenYellow;">
            <p>Here's a demonstration of how to change the background color of a scroll box. To change the background color, we use the CSS 'background-color' property.</p>
            </div>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/scroll-boxes/scroll-box-color.cfm">Scrollbox Colors</a></p>

Here's a demonstration of how to change the background color of a scroll box. To change the background color, we use the CSS 'background-color' property.

Scroll Box - Text Color

To change the color of the text within the scroll box, you need to use the color property. Like this:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <div style="border:1px solid black;width:150px;height:150px;overflow:scroll;background-color: GreenYellow;color: DarkOrange;">
            <p>Here's a demonstration of how to change the text color of a scroll box. To change the text color, we use the CSS 'color' property.</p>
            </div>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/scroll-boxes/scroll-box-color.cfm">Scrollbox Colors</a></p>

Here's a demonstration of how to change the text color of a scroll box. To change the text color, we use the CSS 'color' property.

Scroll Bar Color

You can also change the color of the scroll bar. To do this, you need to use a non-standard CSS property. This code doesn't work in all browsers, as this property is not actually part of the official CSS specification. Actually, you might only be able to see this effect if you're using Internet Explorer 5.5 or above.

Anyway, to change the scroll bar color, use the scrollbar-base-color property. Like this:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <div style="border:1px solid black;width:150px;height:150px;overflow:scroll;background-color: GreenYellow;color: DarkOrange;scrollbar-base-color: ForestGreen;">
            <p>Here's a demonstration of how to change the scroll bar color of a scroll box. To change the scroll bar color, we use the (non-standard) CSS 'scrollbar-base-color' property.</p>
            </div>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/scroll-boxes/scroll-box-color.cfm">Scrollbox Colors</a></p>

Here's a demonstration of how to change the scroll bar color of a scroll box. To change the scroll bar color, we use the (non-standard) CSS 'scrollbar-base-color' property.