how to use custom Scrollbar in firefox?

Question

how to use custom Scrollbar in firefox?? i am using this but not working..

@-moz-document url("chrome://browser/content/scratchpad.xul"),
url("chrome://stylish/content/edit.xul") {
    scrollbar,
    scrollbar thumb,
    scrollcorner {
       -moz-appearance:none!important;
       background:none!important;
       border:none!important;
       min-height:9px!important;
       min-width:9px!important;
    }

    scrollbar thumb {
       background:rgba(0,0,0,.2) padding-box!important;
       border:1px solid rgba(0,0,0,.6)!important;
       border-radius:3px!important;
    }

    scrollbar thumb:-moz-any(:hover, :active) {
       background:rgba(0,0,0,.8) padding-box!important; /* Why doesn't :active work? */
    }

    scrollbar scrollbarbutton {
       visibility: collapse !important;
    }    
}

Answer 1

Here is an excellent cross-browser scrollbar styler. It actually mimics a scrollbar instead of styling the native browser scrollbar.

http://livepipe.net/control/scrollbar

Answer 2

As far as I know, there isn't a scrollbar element, and you can't style scrollbars with CSS (in Firefox, anyway). Where'd you find out about that element?