HTML Scrollbars

You can change the scrollbar color using the following HTML/CSS code. Note that, changing the scrollbar color is not part of the official CSS specification so this code will not work in all browsers. For example, the code works in Microsoft Internet Explorer 5.5 and above but not Firefox.

Scrollbar Color of the Browser

The easiest way to change the color of your scrollbars is to apply the 'scrollbar-base-color' property to the HTML 'body' element.

Note that this code actually changes the color of all scrollbars on the page (including those of form elements such as the 'textarea' element).


<head>
<style type="text/css">
body {scrollbar-base-color:orange;}
</style>
</head>
<body>
<textarea cols="30" rows="4">
Here's enough text to make this textarea grow scrollbars....
HTML scrollbars, scrollbar color, change browser scrollbars,
css scrollbar, change color of the scrollbar...
</textarea>
</body>

This code results in:

Scrollbar Color for 'Textarea' Only

You can add color to the scrollbars of your form elements without it affecting the browser scrollbars. All you need to do is replace 'body' with the name of the form element. For example, change 'body' to 'textarea'. Like this:


<head>
<style type="text/css">
textarea {scrollbar-base-color:orange;}
</style>
</head>
<body>
<textarea cols="30" rows="4">
Here's enough text to make this textarea grow scrollbars....
HTML scrollbars, scrollbar color, change browser scrollbars,
css scrollbar, change color of the scrollbar...
</textarea>
</body>

This code results in:

Scrollbar Color for Selected Textarea Elements

If you want different textarea elements to have different classes, you'll need to use classes. This is where you create a class in your stylesheet, then use that class from within your form element. Like this:


<head>
<style type="text/css">
textarea.orange-scrollbar {scrollbar-base-color:orange;}
textarea.red-scrollbar {scrollbar-base-color:red;}
</style>
</head>
<body>
<textarea cols="30" rows="4" class="orange-scrollbar">
Here's enough text to make this textarea grow scrollbars....
HTML scrollbars, scrollbar color, change browser scrollbars,
css scrollbar, change color of the scrollbar...
</textarea>
<textarea cols="30" rows="4" class="red-scrollbar">
Here's enough text to make this textarea grow scrollbars....
HTML scrollbars, scrollbar color, change browser scrollbars,
css scrollbar, change color of the scrollbar...
</textarea>
</body>

This code results in:

More Options

If you want more control over the scrollbar color, you can use a bunch of other properties. Here they are - their names are reasonably self explanatory. Try experimenting around with different colors to see the different effect it has on your scrollbars.


<head>
<style type="text/css">
textarea.custom-scrollbar {scrollbar-3dlight-color:black;
	scrollbar-arrow-color:black;
	scrollbar-track-color:black;
	scrollbar-darkshadow-color:gray;
	scrollbar-face-color:orange;
	scrollbar-highlight-color:gold;
	scrollbar-shadow-color:brown}
</style>
</head>
<body>
<textarea cols="30" rows="4" class="custom-scrollbar">
Here's enough text to make this textarea grow scrollbars....
HTML scrollbars, scrollbar color, change browser scrollbars,
css scrollbar, change color of the scrollbar...
</textarea>
</body>

This code results in:

Enjoy this website?

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