Two columns Three columns Mixed cols and rows Gallery Archives Clean & Clear Dark or Black High Contrast/ Impact Blog Designs New Corporate/ Professional Unconventional Designs Liquid layouts Web Design Firms Our Favorites What's Popular Last 20 submissions
Horizontal Menus Vertical Menus Multiple/ Nested Levels

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 (19)

Please note that this isnt valid CSS, scrollbar definitions are proprietary extensions created my Microsoft.

#1: Tom on 10/21 at 10:30 AM

Great tutorial but i have netscape
not internet explorer

#2: Joe on 12/04 at 11:34 PM

It's great but does not work in Mozilla Firefox which i have.

#3: Francis on 01/24 at 08:21 AM

Make sure you read everything instead of jumping to the code. It states above that these rules apply to IE 5.5 +. Many sites post browser specific code because it can be helpful to some.

#4: Bryan on 01/27 at 10:28 AM

I agree with Joe. Stupid stuff: Netscape uses the :hover on any element, while IE only does that for links. I still like Netscape-- no security holes, right Bill Gates?

#5: Digit on 02/23 at 08:25 PM

Digit is right. Internet Exploer should also be able to use :hover on any element.

#6: Craig on 04/04 at 02:01 PM

I put on my page - offline, but no effect at all. :( I used IE 6.0, Dreamweaver

#7: Riedle on 04/06 at 06:14 PM

Have a look here for the code for Mozilla: http://www.planetpenguin.de/artikel-46.html

#8: Tacho on 05/03 at 06:43 AM

im a firefox user as well and i love it, microsoft is starting to announce IE7.0 in press releases and it looks pretty mad, and it doesnt use activeX for once

#9: Eric Johnson on 05/25 at 06:27 AM

Any idea how to customise the scrollbars of a <SELECT> drop down list? The same approach doesnt work for drowdown lists :(

#10: dropdown on 06/02 at 08:46 AM

Post a Comment: Guest (Login or Register)

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below:


CSS Sites by Colors

PSD to HTML, PSD to XHTML Service by PSD2HTML.com. You Design - We XHTML / CSS
You Design - We XHTML
Internet Marketing
Internet Marketing
Website Templates
Website Templates
Flash Templates
Flash Templates
Flash Templates
PSD to valid CSS/ HTML
Online Projects tracking
Web-Based Time Tracking

Advertise Here

Advanced Search

Registration

Become a CSSDrive member to easily post comments, interact in the forums, and more:

 

Annoucement: I'm looking for a few news posters. Interested?

Partners:

CSS Forums

CSS Forums: latest threads Last Post Info
Cant design (1) 05/16/2008 12:28 pm
By: tarik
How to show an entire pdf in one div (2) 05/14/2008 11:07 am
By: Grundic
Starting A Web Design Business - How Do I Attract Customers? (10) 05/13/2008 02:37 pm
By: april
Download.. Pacific Wings multicolor menu (1) 05/13/2008 03:05 am
By: sebreh
Check out this website I am working on CRITIQUE. (5) 05/13/2008 01:20 am
By: abran
rss

Older News

Last Comments: