Scrollbar Colors
id: 4
Category: CSS
Rated: ---

Rate: 12345

** 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 type="text/css"> 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 {

You may ask, "why do we write body and not scrollbar?" Body effects the whole page while there isn't a part of html code at all that says Scrollbar. Next we need to add the face colors and other properties:

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:

<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;
}
</style>

Sitely Home Contact Us About Us

Navigation CSS HTML Website Creation
PHP CuteNews
Photoshop 7.0

Affiliates Apply? (10)

Credits

Site & Layout © Dice of AOR
Anime Oasis Renascence
Valid XHTML 1.0 Transitional Valid CSS 2.1

Disclaimer

All contents are © Dice.
If credit for anything is missing please contact me and it will be added. If there is something you wish me to take off the site (that belongs to you) contact me. It will be removed immediatly.

Basic Rules

All tutorials on this site were written by me, Dice. They may not be redistributed without permission! Feel free to link to the videos.

I have used this site also for a project in college :3