CSS Scrollbar Coloring Tutorial

All you have to do is insert this into your .CSS stylesheet file, and you can alter the right side scrollbar color (only works in Internet Explorer Browsers). Just replace the #000000 with the hex colors you want! You can find the color you want using the Color Schemer

Code:

---

body {
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color:#000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
}

---

If you enjoyed this tutorial, we suggest you register on our forums and post an introduction!

if you care about css validation do not use this as it is illegal code and it will only work in IE

same goes with "filters" for HTML. IE only, and should be avoided.

Keep in mind that browser-specific extensions that don't affect the functionality of the page really aren't going to matter. If you want IE users to have colored scroll-bars, even if Mozilla users have to go without, it's not going to break the page or anything; browsers that don't support the extension will just ignore the style rule.

In some cases, other browsers may even eventually support the extension, whether its part of the official CSS spec or not. This was exactly the case with Iframes, for instance, which were originally an IE-only extension.

dmeister

Quote:

---

same goes with "filters" for HTML. IE only, and should be avoided

---

The -moz-opacity attribute is actually another example of a Mozilla implementation of an IE-like extension (IE's Alpha filter). You could, for instance, create a style rule for an absolute-positioned DIV tag with a 50% transparency (a rather neat looking effect), in both IE and Mozilla browsers, with:

.someDiv { position: absolute; -moz-opacity: 0.5; filter: alpha(opacity=50); }

dmeister