horizontal only webkit scrollbar style css

Answer 1

For horizontal scroll bar set height

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

Answer 2

Once you've set the css for

::-webkit-scrollbar{}

both the horizontal and vertical bars are automatically affected.

If you want the horizontal bar to look different from the vertical bar, you will have to set separate CSS for each, like this:

::-webkit-scrollbar-thumb:horizontal {
    background-color:#5B0B2B;
}
::-webkit-scrollbar-thumb:horizontal:hover{
    background-color:#B31252;
    border: solid 1px #5B0B2B;
}

::-webkit-scrollbar-thumb:vertical {
    background-color:#2A8894;
}
::-webkit-scrollbar-thumb:vertical:hover {
    background-color:#32BFD1;
    border: solid 1px #2A8894;
}

Here's a complete JSFiddle Demo.