Home

CSS Examples Custom scrollbar colors

Date: 10/19/2004 Custom scrollbar colors

Author: CSS Drive

In IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page, which includes various components of the scrollbar. The below CSS shows the relevant CSS properties for scrollbar coloring. Note that if your page uses a doctype that triggers a "Strict" mode in IE, the scrollbar properties need to be assigned to the "HTML" tag instead of the conventional "BODY" in order to work.

The CSS (for non "strict" doctypes):

body{
scrollbar-face-color:#EBF5FF;
scrollbar-base-color:#EBF5FF;
scrollbar-arrow-color:black;
scrollbar-track-color:#F3F3F3;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
}

The CSS (for "strict" doctypes):

html{
"
"
}

Comments (21)

Props on posting how to do it in strict css

#1: Mike Dubbs on 09/30 at 12:59 PM

this website is awsome.....just because of this website i got to know how to change the scrollbar colour...

#2: Jayvin on 08/05 at 12:03 PM

Always amazes me how people blame I.E. because netscape/firefox doesn't display this css. One protocol should be set, Users don't care about politics, just results. Don't blame I.E. ... well not this time at least ...lol

#3: Mongo on 02/19 at 06:32 PM

Hey dropdown, it should work on the select list... make sure you've changed the "body{" part to whatever your dropdown list is titled (it would probably be "select{" instead) or if it has a specific ID parameter, then use that.

#4: Josh on 06/20 at 12:46 AM

I'd like to comment on what maria said about "netscape/firefox [not displaying] this css". I think it's an unnecessary problem that Firefox, Netscape, IE, Opera, and Safari all work independently and require almost completely different coding in order to get one script to work for everyone. It's too unique, too proprietary. Wasn't one of the major reasons behind making the internet was so everyone could be on the same page? Wasn't it meant to have one universal format so all the computers could comminucate with ease? I guess we've missed the reason behind it, huh? Oh, well I guess.

-Josh


GO FIREFOX!!! WOOT!!!
 

#6: Josh on 08/02 at 12:42 AM

now i know how to change the scrollbar colour. thank you :)

#7: scarlett on 08/02 at 05:26 AM

Scroll bar style is work perfactly in internet but not show color of scrollbar in Mozila

#8: Mira on 11/06 at 07:01 AM

I know this thread is old, but I wanted to say thanks for posting this information. I recently started running IE7 and was going nuts trying to get the scrollbar colors to show in our forums, which use frames. We do a lot of custom themes, and it's important they look nice, both to us and our members. I changed 'body' in the css file to 'html, body' and the scrollbar colors showed right up on refresh. I know it's probably not proper css, and may not work in other browsers, but considering about 80+% of our members use some version of IE, I think this is going to wok out really nice for us. Thanks again

#9: cybatron on 12/31 at 06:02 PM

css lessons - css scrollbar examples code
-- http://css-lessons.ucoz.com/scroll-css-examples.htm --

#10: cemilxx on 06/06 at 05:20 PM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site