Standard Css doesn’t allow scrollbars customizations, only color changes are allowed with only ie-compatible css code.

I found three solutions to realize a custom scrollbar:

• jsScrollbar
• Mootools styled scrollbar
• jQuery slider gallery

The first, jsScrollbar, is simply the best and the more customizable scrollbar. It uses div blocks which are js manipulated to simulate a scrollbar and get a totally custom bar. You can read the tutorial and get a scrollbar like this.

Mootools styled scrollbar is another good solution to specify your scroolbar.

The last, jQuery slider gallery creates the same effect used on Apple’s web site, an horizontal scroll with text within.

19/7/2008 UPDATE
The code isn’t valid anymore. Read the comments.

In Thickbox css code there are some hacks that doesn’t validate the code (only css, rather xhtml is valid).
Invalid code is javascript inline css document. So, I changed invalid code with a js function call. Take an example:

* html #TB_overlay { /* ie6 hack */
position: absolute;
/*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’); NOT VALID*/
height: expression(fixHeight(document.body.scrollHeight, document.body.offsetHeight)); //VALID
}* html #TB_window { /* ie6 hack */
position: absolute;
/* margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + ‘px’); NOT VALID */
margin-top:expression(fixMarginTop(this.offsetHeight,document.documentElement,document.body.scrollTop)); //VALID
}

So substitute expression inline in css file with calls to fuctions externally defined, and load the following file whenever you’re using thickbox in your site:

expressions.js:

function fixHeight(scrollHeight, offsetHeight)
{
return (scrollHeight > offsetHeight ? scrollHeight : offsetHeight + ‘px’);
}
function fixMarginTop(offsetHeight,documentElement,scrollTop)
{
return (0 - parseInt(offsetHeight / 2) + (TBWindowMargin = documentElement && documentElement.scrollTop || scrollTop) + ‘px’);
}

To use Thickbox now you need these loadings:

<script src="/lib/thickbox/jquery.js" type="text/javascript"></script>
<script src="/lib/thickbox/thickbox.js" type="text/javascript"></script>
<script src="/lib/thickbox/expressions.js" type="text/javascript"></script>
<style type="text/css"> @import "/lib/thickbox/thickbox.css"; </style>

Download Thickbox 3.1 editated sources:
thickbox.css (editated)
expressions.js (added)

Do you have a <div> empty block with only a background-image and you want to make it linkable? Maybe you tried in this way:

—CSS—

.linkable_block { background:url(back.jpg); width:200px; height:100px; }

—HTML—

<a href="#"><div id="linkable_block"></div></a>

but it isn’t valid. So this is the solution, just put the link inside and set it a style, it will fit the block size also if you change the block size:

—CSS—

.linkable_block {background:url(back.jpg); width:200px; height:100px; }
.linkable_block a { width:100%; height:100%; display:block; }

—HTML—

<div id="linkable_block"><a href="#"></a></div>