How can I style horizontal scrollbar by CSS?

Question

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?

Answer 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.).