How can I style horizontal scrollbar by CSS?

HtmlCss

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

::-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 - Html

This may help

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

Solution 3 - Html

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

Solution 4 - Html

Try This

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

Solution 5 - Html

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

Solution 6 - Html

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.

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

How to add shadow to the text in flutter?

FlutterDartTextShadow

Next Solution:

Angular 2 Material 2 datepicker date format

JavascriptAngularAngular Material2

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRomanotiView Question on Stackoverflow
Solution 1 - HtmlRoko C. BuljanView Answer on Stackoverflow
Solution 2 - HtmlSifat HaqueView Answer on Stackoverflow
Solution 3 - HtmlPrajeesh K PView Answer on Stackoverflow
Solution 4 - HtmlshrutiView Answer on Stackoverflow
Solution 5 - HtmlKoshinView Answer on Stackoverflow
Solution 6 - HtmlAbdulbasitView Answer on Stackoverflow