css去掉滚动条箭头,浏览器默认滚动条箭头样式的修改

我在修改浏览器默认滚动条样式时，没办法实现在滚动条两边出现单个方向箭头？在默认的方向箭头处打补丁时，滚动条的两端总是会出现两个方向的按钮。

一下是代码实例：

::-webkit-scrollbar-button {

display: block;

}

::-webkit-scrollbar-button:horizontal:single-button:start {

width: 24px;

background: url("../img/scroll_btn.png") 0 -52px no-repeat;

cursor: pointer;

}

::-webkit-scrollbar-button:horizontal:single-button:end {

width: 24px;

background: url("../img/scroll_btn.png") 0 -77px no-repeat;

cursor: pointer;

}

::-webkit-scrollbar-button:vertical:single-button:start {

width: 16px;

background: url("../img/scroll_btn.png") -3px 0px no-repeat;

cursor: pointer;

}

::-webkit-scrollbar-button:vertical:single-button:end {

width: 16px;

background: url("../img/scroll_btn.png") -3px -26px no-repeat;

cursor: pointer;

}

效果图：能否去掉红色方框的空白？？