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.
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.
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.
textarea scrollbar is the same as any other element. Either do it with
classes, or add inline-style code into the tag itself.
The red/yellow area down here is a dithered blend of your base and highlight colours. Control it separately with scrollbar-track-color: blue.
Designing Without Tables: Using CSS
I highly recommend this book for those wanting to learn how to write CSS, including using CSS for layout. SitePoint ships anywhere in the world and you can download the first 4 chapters for free. Read our review.