How to style the scroll bar?

Question

Good,

I’ve been spending some time looking for solutions to this but I can’t find it, I have a scrollbar And I’d like to take your size down. Can someone point me to a website or tell me what it takes to make this possible:

Thank you

Answer 1

For browsers webkit (Chrome, Safari, Opera 15+):

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Credits from the above code: CSS Tricks

To create a scrollbar exactly as in the image of your question would be something like this:

::-webkit-scrollbar-track {
    background-color: #F4F4F4;
}
::-webkit-scrollbar {
    width: 6px;
    background: #F4F4F4;
}
::-webkit-scrollbar-thumb {
    background: #dad7d7;
}

Here’s an online jsFiddle example: http://jsfiddle.net/nach90sq/

---

However the above code will not work in Internet Explorer, but for that you can use this:

scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;

Credits from the above code: Codemug

Alternatively you can always google by jQuery plugins for scrollbars, and you will find plugins like:

• Perfect Scrollbar
• Nano Scroller
• Malihu Custom Scroll Bar