My custom webkit scrollbars have been styled using CSS, everything is displaying correctly except for the arrow increment/decrement buttons on the vertical scrollbar. When I removed "horizontal" from the ::-webkit-scrollbar-button line to make both horizontal and vertical scrollbars look the same, an image appears. However, specifying either horizontal or vertical for this property only shows images for the Horizontal scrollbar buttons. I have made sure that the issue is not 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);
}