Using CSS, you can style the browser window scrollbars. But this is a Microsoft extension to CSS, so only Internet Explorer supports it. Still, it's easy to do, and since most of your visitors probably use Internet Explorer, you might want to do it anyway. It can really look great.

Examples

Only Internet Explorer supports colored scrollbars. If you are using Safari, Mozilla, Firefox, Opera, etc. these examples will not work.

You use CSS to assign color values to the various scrollbar properites. Here is an iframe I created and styled as an example. To quickly add colors to a scrollbar, just add the scrollbar-base-color property. Remember, colored scrollbars work only in Internet Explorer.

textarea

 
<style type="text/css">
.color{
height:200px;
scrollbar-base-color:#003399;
width:100%;
}
</style>
 
<textarea class="color">
Lorem ipsum ...
</textarea>
 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet eros. Pellentesque ullamcorper dignissim dolor. Proin imperdiet lacinia nunc. Nam diam sapien, gravida sit amet, tincidunt ac, ornare vel, lacus. Nam vel eros ut ipsum mollis adipiscing. Etiam rhoncus sapien quis lorem. Proin dignissim mauris convallis leo. Suspendisse et ipsum vitae libero hendrerit porta. Aliquam congue auctor ipsum. Nulla lobortis. Etiam quis eros. Vivamus scelerisque, lacus sed aliquet placerat, sem mauris sollicitudin magna, id sodales ipsum nunc a pede. Quisque aliquam elit et ligula. Nullam orci elit, pellentesque nec, sagittis eu, congue sed, orci. In nec ligula fringilla quam tincidunt elementum. Proin lacinia. Aenean vulputate, libero sit amet porttitor sollicitudin, diam turpis accumsan massa, et condimentum lectus quam eget enim. Nullam fermentum vestibulum sem. Aenean tempor mi sit amet lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ultrices purus nec neque. Ut dictum orci sed ligula. In hac habitasse platea dictumst. Quisque ultrices tristique pede. Quisque aliquam elit et ligula. Nullam orci elit, pellentesque nec, sagittis eu, congue sed, orci. In nec ligula fringilla quam tincidunt elementum. Proin lacinia. Aenean vulputate, libero sit amet porttitor sollicitudin, diam turpis accumsan massa, et condimentum lectus quam eget enim. Nullam fermentum vestibulum sem. Aenean tempor mi sit amet lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ultrices purus nec neque. Ut dictum orci sed ligula. In hac habitasse platea dictumst. Quisque ultrices tristique pede.

iframe

To color the scrollbars of an iframe, you need to add the CSS code to the HTML page that is loaded.

So this example will not work, because the page is from google.com. I cannot add the CSS code to Google's homepage, so my iframe will not have colored scrollbars, even though I have assigned the CSS class to the iframe.

 
<iframe class="color" src="http://google.com" class="color"></iframe>

This example will work, because I will load a page I control and that I have added the CSS to in order to color the scrollbars. The CSS code below goes into the page being loaded into the iframe. And the HTML code goes into the page with the iframe.

 
<style type="text/css">
html{
scrollbar-base-color:#003399;
}
</style>
<iframe src="/examples/css/colored_scrollbars/" class="color"></iframe>

The Scrollbar Properties Supported By IE

scrollbar3dLightColor
Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.

scrollbarArrowColor Sets or retrieves the color of the arrow elements of a scroll arrow.

scrollbarBaseColor
Sets or retrieves the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.

scrollbarDarkShadowColor
Sets or retrieves the color of the gutter of a scroll bar.

scrollbarFaceColor
Sets or retrieves the color of the scroll box and scroll arrows of a scroll bar.

scrollbarHighlightColor
Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.

scrollbarShadowColor
Sets or retrieves the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.

scrollbarTrackColor
Sets or retrieves the color of the track element of a scroll bar.

Conclusion

As you have seen, adding colored scrollbars to Internet Explorer is easy, but they work only in Internet Explorer. To quickly add colors to a scrollbar, use the scrollbar-base-color property. The CSS to add scrollbars to an ifram must go in the HTML pages being loaded, not the iframe element itself. But a textfield is different: you add the CSS to the textfield element.