如何修复vss滚动条？

Question

我在我的ProfileServlet的css中使用了它：

::-webkit-scrollbar-button:vertical {
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

::-webkit-scrollbar-button:horizontal {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

请注意，在下图中，4个滚动条按钮中只有2个看起来正确：

我怎样才能让所有4个按钮看起来都正确？

另外如何使滚动条拇指可见？

为什么水平和垂直滚动条的形状不同

Answer 1

我发现了1号和3号的答案.1：

变化：

::-webkit-scrollbar-button:vertical {
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

::-webkit-scrollbar-button:horizontal {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

要：

::-webkit-scrollbar-button:vertical:end {
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

::-webkit-scrollbar-button:horizontal:end {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

::-webkit-scrollbar-button:vertical:start {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

::-webkit-scrollbar-button:horizontal:start {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

2：

我有：

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

但需要：

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

现在只需要滚动条 - 拇指可见。