Dynamic Drive CSS Library- Custom scrollbar colors

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Other: Here

Custom scrollbar colors

Author: Dynamic 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 valid 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. Due to this divergence in implementation, an easy solution is just to assign both the HTML and BODY tags the relevant scrollbar coloring CSS properties.

Scrollbar coloring via CSS is only supported in IE.

The CSS:

Code Info

Rate this code:

Date Posted: 05/02/2006

Revision History: None

Usage Terms: Click here

Your Comments (57)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 3 of 6 pages < 1 2 3 4 5 > Last »

ohhhhh yes!!! its kinda like the scroll on the http://www.dsdk12.net/~afjrotc/ page!!!! thank you soooooooo much Josh!!.... but how do u do it LOL =P

Posted by Mandy on 10/14, 12:33 AM

Doesn't work for me.
I got errors in the CSS Validator.

Posted by Johnny on 10/19, 02:38 AM

Ummm, it does[/stron] seem to work in Firefox.

Posted by Josh on 11/22, 08:15 PM

Sure you can make the scrollbar wider. You'd do this through >Start > Settings > Control Panel > Display click into the display and on the top men click appearances and it's there where you would customize the looks of everything from your computers menus desktop fonts colors scrollbars and all sorts of stuff. There in the advanced portion.Hope it helps you!
lj

Posted by Laura on 11/28, 06:49 PM

for making the scrollbar and many other changes to the look of your computers look. Go to Start > Settings > Control Panel > Display > click into display and click Appearances at the top in there and you'll see the various different changes you can make for you computers whole themes in there fonts, colors, sizes of pretty much anything. Check out the advanced options in the appearances also!! Hope that helps.
lj

Posted by Laura on 11/28, 06:56 PM

About the transparent scrollbars:

I dont know if this is still active, but I think Iv'e discovered the seceret to creating transparent scrollbars! However it only seems to work in an Iframe.

I entered:

 <style type="text/css"> BODY { background-image:url("pic.jpg"); /*using a pic makes it easier to see*/ FILTER: chroma (color=blue); SCROLLBAR-BASE-COLOR: blue; } /* use the same style for the other page as well */ </style> <iframe src="YOUR_PAGE_HERE.htm" allowTransparency background-color="transparent"></iframe>

Posted by Chuff on 12/01, 04:49 AM

I am very curious to know if images can be applied to scrollbar styles instead of colours. For example if I wanted to make the scrollbar a glass button style.

Posted by Jeff on 12/01, 07:57 AM

@ Mandy - transparant scrollbars in iframe's are possible (ie support only i tought..), but i prefer when using a frameset or an iframe to turn the scrollbar off. Did you also tried - body scroll="no - in the (included) frame page? Apart from that most browsers act differtent on form ellements, including scrollbars. (just keep focused on the popular ones.. ie, firefox, netscape & opera)

Posted by Monsta on 12/13, 08:22 AM

THANK YOUUUUUUUUUUUUUUUU

Posted by Mandy on 12/14, 04:05 AM

Hi,

I am using scroll bar properties (CSS) for Internet Explorer. It works properly in IE but not supporting in the Mozilla Firefox.

If anybody knows how to do this please reply.

Posted by Nutan on 01/29, 02:56 AM

Comment Pages 3 of 6 pages < 1 2 3 4 5 > Last »
Commenting is not available in this weblog entry.