How can I style horizontal scrollbar by CSS?

I styled my vertical scrollbars with the following code:

::-webkit-scrollbar {
  width: 4px;
  border: 1px solid #d5d5d5;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #b0b0b0;
}

Now, my vertical scrollbar looks like this:

However, my horizontal scrollbar looks like this :

How can I set a 2-4px height for it?

Solution 1:

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

since logically one cannot force a vertical scrollbar to be a certain height (since dictated by the positioned parent) - therefore such height property is to target the horizontal's scrollbar height - and vice-versa (width for the width of the vertical scrollbar.).

Solution 2:

This may help

   ::-webkit-scrollbar{
        height: 4px;
        width: 4px;
        background: gray;
    }
    ::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
    }

Solution 3:

::-webkit-scrollbar:horizontal{
  height: 8px;
  background-color: red;
}
::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
        
    }