Custom Webkit Scrollbar Button

Question

I am trying to figure out how to make the webkit scrollbar button appear. I'm testing this on safari on Mac.

I read these guides but I can't for the life of me figure out how to get a simple button to make it go up and down. I have an image that I was supposed to emulate, but no idea how. Can images be used as buttons? Example of image

!(http://oi62.tinypic.com/28kh76a.jpg)

http://css-tricks.com/custom-scrollbars-in-webkit/

Have this so far..

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

::-webkit-scrollbar-track {
background-color: #fff;  
}

::-webkit-scrollbar-thumb {  
background-color: #81CFCC;  
height: 10px;

but don't know how to get the scroll buttons for up and down.. or how to style them.

Solution 1

Use the ::-webkit-scrollbar-button selector and set its display to block. I wasn't getting buttons to show up until I set their display prop.

Solution 2

refer to this article, this is all you will need to know for webkit scrollbars

Custom Scrollbars in WebKit - Css Tricks

EDIT 1

You could try something like this

::-webkit-scrollbar-button {
  background: #444;
}

EDIT 2

hopefully this helps in some way

http://jsfiddle.net/vfmfmaxo/