CSS and Scrollbars
Scrollbars don’t have the greatest reputation among Internet users. In fact, most people hate them, so it’d be nice if you could do something to make them more fun. Well, at least dress them up from that dull default gray. Look at our lovely colourful bars, they complement the look of the site beautifully and most importantly, were very easy to make.
This page was last updated on 2012-08-21
Browser Compatibility Note:
Styling the scrollbars is only supported by » Internet Explorer 5.5+. It will not work in Netscape or other browsers or earlier versions, but it won’t mess them up either. Gooood.
The properties are non-standard CSS, and will stop your site’s stylesheet from validating. It’s not that big a deal, but purists beware.
Coloured Scrollbars
This is the code you need to put in the <head> part of your document, or into your existing stylesheet if you have one.
Note that most other sites tell you to apply these styles to the body element. If done this way, the properties will only work in IE6 in ‘quirks mode’ — that is, when the DTD is incorrect. If you’re using a full DOCTYPE (HTML 4.01 | XHTML 1.0) and apply it to the body of the document, they will not be coloured, as the properties are non-standard CSS. However, it’s been found that if you apply them to the html element, due to some bug in the way IE6 works out inheritance, the styles will be applied after all.
Apply the CSS attributes on your html tag as below will affect all the scrollbars on your page, including any horizontal and mini-scrolls that appear for textareas or iframes.
html {
scrollbar-base-color: #9999cc;
scrollbar-arrow-color: white;
scrollbar-track-color: #ccccff;
scrollbar-shadow-color: black;
scrollbar-lightshadow-color: black;
scrollbar-darkshadow-color: gray;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: black;
}
Of course, you can edit any of those values in HEX or color-name codes to suit your site. Note that you can specify the shadow color as one color, or go more in-depth and pick a light shadow and a dark shadow. The highlight option above is the strip that flows down the left side of the moveable bar. The ‘3dlight’ is the leftmost strip, which is a part of the highlight and very narrow.
Setting an iframe or textarea scrollbar is the same as any other element. Either do it with classes, or add inline-style code into the tag itself.
Diagram
scrollbar-base-color: red;
scrollbar-arrow-color: white;
scrollbar-shadow-color: blue;
scrollbar-lightshadow-color: green;
scrollbar-darkshadow-color: blue;
scrollbar-highlight-color: yellow;
scrollbar-3dlight-color: black;
The red/yellow area down here is a dithered blend of your base and highlight colours. Control it separately with scrollbar-track-color: blue.
