How to stylize the scroll bar?

Navigation
15

Good,

I have wasted some time looking for solutions to this but I do not find it, I have a scrollbar and liked to shrink its size. Can someone point me to a site or tell me what it takes to make this possible:

Thank you

    
asked by anonymous 12.06.2015 / 16:04

1 answer

21

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 */ }

Creditsoftheabovecode: 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 example online at jsFiddle: link

However the above code will not work in Internet Explorer, but for this 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;

Creditsoftheabovecode: Codemug

Alternatively you can always Google for jQuery plugins for scrollbars, and you'll find plugins like:

12.06.2015 / 16:17
What is abstraction? What is HMAC?