Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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 4 of 6 pages « First  <  2 3 4 5 6 >

only supported in IE ! but thanks..
Posted by haber haberler on 02/05, 11:09 AM
thanks man really thanks for your code !!
Posted by chintak on 02/21, 07:58 PM
It doesn't comply with Strict HTML...
Posted by CMSTheme on 03/29, 12:45 PM
Nice!~~
Posted by Endis on 05/01, 01:37 AM
Is there an example for this?
Posted by raj on 06/05, 03:30 AM
I don't know about the CSS, but I do know how to make transparent scrollbars in iframes using HTML.

Using the iframe code, you need this:

<iframe name="inlineframe" src="yoururl.html" width=200 height=200 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=auto style="FILTER: chroma(color=#ff0000)" allowtransparency="true"></IFRAME


#ff0000 being a color NOT used in your layout. You can change this to a color that works for you, as long as it is not used elsewhere because that is the color that will become transparent.

Then, you will need to put the scrollbar style in each one of your pages,
<style>
body {
scrollbar
-base-color#ff0000;
scrollbar-arrow-color#000000;
scrollbar-3dlight-color#ff0000;
scrollbar-darkshadow-color#ff0000;
scrollbar-face-color#ff0000;
scrollbar-highlight-color#000000;
scrollbar-shadow-color#000000;
scrollbar-track-color#ff0000;
}
</style>
<
style type="text/css"


Setting #ff0000 (or the color you chose to use) only to the areas of the scrollbar that you want to appear transparent in your iframe.

As for Firefox, they do not support coloured scrollbars as it is a Microsoft developed idea.
Posted by Nick on 06/09, 10:27 PM
Can anyone help me about applying this scrollbar style in firefox.
Posted by Foysal Osmany on 06/19, 10:02 AM
But its not working in Firefox, anybody know how we can change scrollbar color in most of browsers?
Posted by chetab sachania on 07/20, 04:00 AM
Colored scrollbars work ONLY IN IE 5.5 and UP!

You cannot do this in Opera, nor in Firefox, not in Camino or Safari!!!!!!!

That would mean you'd have to skin your own browser theme!!!!

It is not web standard to do scrollbars and they don't look that great anyway. Colored scrollbars are so 1990. Colored scrollbars do not make your code valid if you're trying to run it through the HTML validator.
Posted by Todd on 07/20, 04:26 PM
SCROLL BAR COLOURS in other browsers.......

Please READ the notes mentioned prior to the code sorce which say's the following:
-----------------------------------------------------
In IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page

Scrollbar coloring via CSS is only supported in IE.
-----------------------------------------------------

Maybe that will help people realise before submitting questions for un-supported browsers

:)
Posted by Jo on 08/30, 10:23 PM

Comment Pages 4 of 6 pages « First  <  2 3 4 5 6 >

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.