css - 水平方向のみを表示するWebkitスクロールバーボタン

Question

カスタム Webkit スクロールバーの CSS スタイルは次のとおりです。すべてが希望どおりに表示されていますが、垂直スクロールバーの矢印のインクリメント/デクリメント ボタンが表示されません。行から「水平」を削除すると::-webkit-scrollbar-button、水平スクロールバーと垂直スクロールバーが同じになり、画像が表示されます。ただし、このプロパティに水平または垂直のいずれかを指定すると、水平スクロールバー ボタンの画像のみが表示されます。また、画像ファイルに問題がないことも確認しております。

::-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);
}