Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at


This example shows how to style the scrollbars in your xul application. Scrollbars inside browser elements will be styled to. Tested on windows xp.

Example assumes a structure like this:


Copy the scrollbars.css from xulrunner/chrome/classic.jar/skin/classic/global to app/chrome/skin/global/scrollbars.css

Open the app/chrome/chrome.manifest and add:

skin app-global standard/1.0 skin/global/
override chrome://global/skin/xulscrollbars.css chrome://app-global/skin/scrollbars.css

xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx. So to make this work with osx, make an extra override:

override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css

Change some color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used.

Example xul window:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="sampleWindow" width="320" height="240"
<hbox flex="1">
   <browser type="content" src="" flex="1"/>
   <scrollbar orient="vertical"/>

Document Tags and Contributors

 Contributors to this page: wbamberg, fscholz, Ma gu
 Last updated by: wbamberg,