[Home]Scrollbar color

HomePage | RecentChanges | Preferences | Newbie Help

Category CSS FAQ

The declaration used in CSS for colored scroll bars is:

<style type="text/css">
body,html {
scrollbar-arrow-color: cyan;
scrollbar-base-color: blue;
scrollbar-dark-shadow-color: blue;
scrollbar-3dlight-color:white;
scrollbar-face-color: #b0c4de;
scrollbar-highlight-color: blue;
scrollbar-shadow-color: blue;
scrollbar-darkshadow-color: purple;
 }
</style>
Change colors as desired. Limited browser support (see below).
Why "body,html"?

MSIE looks at the scrollbar properties on the <body> tag when it's in Quirks mode and looks at the same properties on the <html> tag when it's in Standards mode. If you're designing a page and you don't use a DOCTYPE, you can leave out the ",html" because IE will always be in Quirks mode. But if you include a doctype in your page, I think you have to use "body,html" to make it work with all versions of IE. If you're writing a user style sheet, you must use "body,html" or your styles will be ignored on standards-mode pages. -- [Jesse Ruderman]?


[Harmony Hollow Software] have created a tool to work out your colours automatically. It sounds like the sort of thing that only newbies would go for, but whatever works for you... -- Mark Gallagher


Comments

Not valid in CSS 1 or 2.

Only works in IE5.5 and above, actually. Now works in Konqueror as well.

Note that changing the colour of the scrollbar may annoy some viewers, albeit less than some of the fancier things javascript does :o) -- Mark Gallagher


i find it incredibly annoying and arrogant of people when they screw with my browser settings (what right have they got to change them?) so i use my own CSS to override changing the scroll bar colors.

BODY,HTML {

 scrollbar-face-color: #??? !important;
 scrollbar-shadow-color: #??? !important;
 scrollbar-highlight-color: #??? !important;
 scrollbar-3dlight-color: #??? !important;
 scrollbar-darkshadow-color: #??? !important;
 scrollbar-track-color: #??? !important;
 scrollbar-arrow-color: #??? !important;
}

change #??? to what your normal colors are, save it as a CSS file and tell your browser to use it for formatting your docs.

with IE its: tools>internet options>accessibility>user style sheet>format documents using my style sheet. click browse to locate where you saved the CSS file

(!important is used to ensure your CSS takes precedence over the authors CSS. further reading: http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules )

brucie


If you like changing your desktop colours regularly, or don't know what they are, use this CSS instead:
 body,html {
  scrollbar-base-color: ButtonFace ! important;
  scrollbar-3dlight-color: transparent ! important;
  scrollbar-arrow-color: transparent ! important;
  scrollbar-darkshadow-color: transparent ! important;
  scrollbar-face-color: transparent ! important;
  scrollbar-highlight-color: transparent ! important;
  scrollbar-shadow-color: transparent ! important;
  scrollbar-track-color: transparent ! important;
 }
Which means you get your default styles whatever the so called "designer" of the page thinks! Donald Noble
HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited April 29, 2003 3:44 pm (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media