Here is my CSS styling for my custom webkit scrollbars. Everything is displaying the way I want to, but the arrow increment/decrement buttons for my vertical scrollbar are not displaying. When I removed "horizontal" from the ::-webkit-scrollbar-button line, so that horizontal and vertical scrollbars are the same, an image will show up. However, if I specify either horizontal or vertical for this property, only images for the Horizontal scrollbar buttons will show. I have also verified that it is not a problem with the image file.
::-webkit-scrollbar
{
width: 17px;
height: 17px;
background: #191919;
}
::-webkit-scrollbar-button:start:decrement
{
height: 20px;
width: 20px;
display: block;
background-repeat: no-repeat;
}
::-webkit-scrollbar-button:end:increment
{
height: 20px;
width: 20px;
display: block;
background-repeat: no-repeat;
}
::-webkit-scrollbar-track-piece:horizontal
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #3b3b3b));
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-track-piece:vertical
{
background: #191919;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb
{
-webkit-border-radius: 6px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed1c24), color-stop(100%, #96161b));
border: 1px solid #5c0d10;
border-top: 1px solid #f1383f;
border-left: 1px solid #f1383f;
}
::-webkit-scrollbar-button:veritcal:decrement
{
background-image: url(images/up.png);
}
::-webkit-scrollbar-button:veritcal:increment
{
background-image: url(images/down.png);
}
::-webkit-scrollbar-button:veritcal:decrement:active
{
background-image: url(images/upa.png);
}
::-webkit-scrollbar-button:veritcal:increment:active
{
background-image: url(images/downa.png);
}
::-webkit-scrollbar-button:horizontal:decrement
{
background-image: url(images/left.png);
}
::-webkit-scrollbar-button:horizontal:increment
{
background-image: url(images/right.png);
}
::-webkit-scrollbar-button:horizontal:decrement:active
{
background-image: url(images/lefta.png);
}
::-webkit-scrollbar-button:horizontal:increment:active
{
background-image: url(images/rightaa.png);
}
