How do I style custom scrollbars?

You can override the global stylesheet via WebCoreConfig::setCustomCSS (or in C#, WebCore.Config.customCSS) . Awesomium is WebKit-based which means you can use all of the WebKit CSS extensions.

Here's an article about styling scrollbars in WebKit: http://www.webkit.org/blog/363/styling-scrollbars/

If you'd like to override the scrollbar style, at the very least, you'll need to specify a scrollbar width, height, track color, and thumb color.

Here's an example that uses a blue track and red slider thumb:

config.setCustomCSS("::-webkit-scrollbar { width: 20px; height: 20px; } ::-webkit-scrollbar-track { background-color: blue; } ::-webkit-scrollbar-thumb { background-color: red; }");

Scrollbars on Linux

You'll need to define your own scrollbars on Linux using the techniques described in this article.

Here's a complete scrollbar example that mimics the style of scrollbars in Ubuntu, feel free to use it in your own applications:

config.setCustomCSS("::-webkit-scrollbar {width: 12px; height: 12px; background-color: #f2f2f1; } ::-webkit-scrollbar-track { border-radius: 10px; border: 1px solid #bbb7b3; background: -webkit-gradient(linear, left top, right top, color-stop(0, #dcd9d7), color-stop(1, #e5e3e2)); } ::-webkit-scrollbar-thumb {  border-radius: 10px; -webkit-box-shadow: inset 1px 0 0 1px white; border: 1px solid #9c9996; background: -webkit-gradient(linear, left top, right top, color-stop(0, #f9f9f8), color-stop(1, #e6e4e3)); } ::-webkit-scrollbar-track-piece:disabled { display: none !important; } ::-webkit-scrollbar-track:disabled { margin: 6px; }");

Further Reading

Here's a couple additional articles on re-styling scrollbars using WebKit CSS:

http://css-tricks.com/custom-scrollbars-in-webkit/
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-...
http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/