Current Section: CSS -> Scrollbar // « Back

** Please note: While many people like to change the color of their scrollbars, this is not valid CSS! It's only visible in Internet Explorer.

In order to make a scrollbar first you must know each part of it:

Now we can start the code. First we need to add the basic <Style> without this our code wont work.
Now we add the other elements in this code(ex.track, face, etc...)

So we need to write body and { so far our code should look like this:

<Style type="text/css">
Body {

Next we need to add the face colors and that stuff:

scrollbar-face-color: #ff0000;
scrollbar-shadow-color: #ff0000;
scrollbar-Darkshadow-color: #ff0000;
scrollbar-highlight-color: #ff0000;
scrollbar-3dlight-color: #ff0000;
scrollbar-track-color: #ff0000;
scrollbar-arrow-color: #000000;

Now each of these colors (ex. #ff0000) can be changed to whatever color you want. You may use hex colors or normal ones(ex. aqua, red, blue, green etc...) now our code should look like this:

<Style type="text/css">
Body {
scrollbar-face-color: #ff0000;
scrollbar-shadow-color: #ff0000;
scrollbar-Darkshadow-color: #ff0000;
scrollbar-highlight-color: #ff0000;
scrollbar-3dlight-color: #ff0000;
scrollbar-track-color: #ff0000;
scrollbar-arrow-color: #000000;

The only thing missing is the closing. We must tell the code that the body properties are closing here and the style sheet has ended, otherwise it wont work at all. We need to add } and </Style>the final code should look like this:

Now there is a way to make scroll bars transparent, in other words; you cant see them they blend into the background. Its not hard really, just need to add a simple code:

filter: chroma(#ff0000); height: 0px;

But can I put this in some random place? No, it has to go withing a div (<div>) or a iframe tag.
You can change the colors, in the filter, anything you have as red(#ff0000) will be transparent if you change the filter to lets say black(#000000) the filter part of the code should look like this:

filter: chroma(#000000); height: 0px;

this will make it so everything you have as black(#000000) will be transparent.

Be careful when using transparency, sometimes it makes the page look worse then it should. I do not recommend using the transparency or the scrollbar code. Any questions though you can contact me using the contact us form under the site navigation.