How to Change the Scrollbar Color in HTML

Changing the color of the scroll bar adds a little more life to your Web pages. You make the change on specific pages within the HTML "head" element. You can change the color of every scroll bar on a page or specify specific controls. You can't change a scroll bar's color using a cascading style sheet file, nor is it an official specification across all browsers. You can also only change the scroll bar color for Internet Explorer -- Firefox and Chrome do not support changing the color.

Instructions

1. Open the HTML file in which you want to change the scroll bar color. Insert the cursor within the "head" element near the top of the file.

2. Enter the following line:

   <style> body { scrollbar-base-color: red } </style>

   This line changes all scroll bars on the HTML page to red. You can use any RGB color using hexadecimal notation. For example, "#C0C0C0" is silver and "#008000" is green. Changing "body" to another control type such as "textarea" applies the color change only to that control.

3. Save the HTML file and upload it to your Web server. Open the HTML page in Internet Explorer to see the changed scroll bar color.

References

• MSDN: ms-scrollbar-base-color Attribute - scrollbarBaseColor Property
• Quackit: HTML Scrollbars