How can I style horizontal scrollbar by CSS?

user_3498235 0
Viewed 119062

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:

enter image description here

However, my horizontal scrollbar looks like this :

enter image description here

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

css html
6 Answers

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

user_154708180

Try This

::-webkit-scrollbar {
    height: 8px;
    overflow: visible;
    width: 8px;
}
user_71095790

Just like @roco has noted above, since the vertical scroll bar's height can not be modified then the height defined would be used for the horizontal bar, but using the -webkit-scrollbar alone will solve your issue with the horizontal bar but will also make your vertical scroll bar behave abnormally, for the best result use this code,

::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    background: gray;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

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

note: The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79.

user_118718670

Inside ::-webkit-scrollbar selected, the height represents the horizontal scrollbar and the width represents the vertical scrollbar. You can also use :horizontal psuedoclass.

user_136666200
Related