Styling QWebKit scrollbars

I read some people had problems styling the scrollbars in QWebkit. It's quite simple, if you think of them as CSS (with webkit specific parameters) instead of Qt Scrollbars. Ideally it should be a stylesheet mapping between QStyleSheet and a css, so that it would automatically do the magic.

You need to implement this CSS in all the documents loaded. You can do this modifying the DOM for the document you load. If you are to provide static content, I would recommend putting the CSS into the content instead, as that is easier to modify later.

Here's a small example on how to style the scrollbars:

::-webkit-scrollbar {
    width: 42px;
}

::-webkit-scrollbar-track-piece {
    background: #CCCCCC;
    border: 2px solid #6666CC;
   -webkit-border-radius: 10px;
    width:20px;
}
::-webkit-scrollbar-thumb:vertical {
    height: 40px;
    border: 2px solid #6666CC;
    background-color: #6666CC;
    -webkit-border-radius: 10px;
}

::-webkit-scrollbar-button:end:increment {
    height:42px;
    width:42px;
    background-image: url(arrow-down.png);
    background-repeat:no-repeat;
    background-color:white;
}
::-webkit-scrollbar-button:start:decrement 
{
    height:42px;
    width:42px;
    background-image: url(arrow-up.png);
    background-repeat:no-repeat;
    background-color:white;
}

::-webkit-scrollbar-button:end:increment:hover {
    background-color:green;
}
::-webkit-scrollbar-button:start:decrement:hover
{
    background-color:green;
}

:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:single-button,
:not(.none):not(.double-start)::-webkit-scrollbar-track-piece:vertical:end:double-button,
.single::-webkit-scrollbar-track-piece:vertical:end,
.double-end::-webkit-scrollbar-track-piece:vertical:end,
.double-both::-webkit-scrollbar-track-piece:vertical:end 
{
    margin-bottom: 40px;
}

:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:single-button,
:not(.none):not(.double-end)::-webkit-scrollbar-track-piece:vertical:start:double-button,
.single::-webkit-scrollbar-track-piece:vertical:start,
.double-start::-webkit-scrollbar-track-piece:vertical:start,
.double-both::-webkit-scrollbar-track-piece:vertical:start 
{
    margin-top: 40px;
}

This is just an example, and you probably want to change it a lot to suite your needs.