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. Therefore, the examples on this page probably won't work unless you're using Internet Explorer. In any case, you can still copy/paste the code into your own website.
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).
| Code | Result |
|---|---|
|
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:
| Code | Result |
|---|---|
|
|
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:
| Code | Result |
|---|---|
|
|
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.
| Code | Result |
|---|---|
|
|
Enjoy this page?
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!
