Home
HTML and CSS
Tutorials
Define Page Scrollbar Styles
Level: Experienced Software:
Please have a look at the example here. Well it does not look that good, but that is just for the differentiation of the areas of the scrollbar. Once you know which area is defined with which code you can modify it as you like. Actually the code is quite self explanatory. Anyway let"s have a look.
| <STYLE TYPE="text/css">
BODY { scrollbar-face-color: green; scrollbar-shadow-color: blue; scrollbar-highlight-color: black; scrollbar-3dlight-color: red; scrollbar-darkshadow-color: brown; scrollbar-track-color: yellow; scrollbar-arrow-color: white; } </STYLE> |
To change the style of the page scrollbar you need to insert the above code between your <head></head> tages in the page. Color names such as green, blue...etc can be replaced with the hexa decimal codes such as #000000.
The following image shows which codes define which part of the scrollbar. I guess it does not need further explanation, since everything is clear already. Go ahead and make your page look nicer.
This is what I have used for my pages, feel free to use it if you want.
| <STYLE TYPE="text/css"> BODY { scrollbar-face-color: #EAEAEA; scrollbar-shadow-color: #EAEAEA; scrollbar-highlight-color: #EAEAEA; scrollbar-3dlight-color: #EAEAEA; scrollbar-darkshadow-color: #697074; scrollbar-track-color: #F7F7F7; scrollbar-arrow-color: #666666; } |
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
Pilko January 08, 2008 says:Why every time i want to change the scrollbar in css body section doesnt work? I opened it in a 3 different browsers. IE, Opera, Firefox. Where is the problem, it doesnt seems to be soo easy to change as it looks. Help please. Thank you.