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.

HTML

Scroll Box Color

Background Color

Text Color

Scrollbar Color

Enjoy this website?

ABOUT

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING

HTML HTML Tutorial HTML Codes/Generators HTML Background Code HTML Bold HTML Color HTML Color Chart HTML Comment Box Code HTML Scrollbox Code HTML Text Code HTML Image Code HTML Link Code HTML Marquee Code HTML Music Code HTML Video Code HTML Form Code HTML Frames Code HTML Entities HTML Examples HTML Help/Cheat Sheet HTML Templates More Codes... HTML Generator HTML Table Generator Marquee Generator Music Code Generator HTML Text Generator Text Box Generator MySpace Generators More Generators... HTML Tags HTML 5 Tags Create a Website
	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? Share Add this page to your Favorites 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 Link to Quackit using one of these banner ads. Help support Quackit by making a donation Oh, and thank you for supporting Quackit!