How to apply CSS only on horizontal scrollbar

Question

I was a new intern and they gave me a simple task: personalize the horizontal scrollbar

I have this code but the vertical scrollbar disappears... I need it to default in vertical direction... only the horizontal scrollbar has to be personalized.

::-webkit-scrollbar {
    width: 7px;
  }
::-webkit-scrollbar-thumb:horizontal {
   border-radius: 8px;
   background-color: rgba(92, 92, 92, 0.5);
  }

If I put the code below in the middle, the vertical scrollbar is also personalized...so I can only personalize it or hide it at all...and I can't do that

::-webkit-scrollbar-thumb {                             
-webkit-appearance: none;
}

Answer 1

Here is an example on how to style only the horizontal scrollbar:

https://codepen.io/lmmm/pen/abKeEJw

You can use the elements you want to style and use your rules as needed:

    horizontal text that overflows

#horizontal::-webkit-scrollbar {
  width: 7px;
}
#horizontal::-webkit-scrollbar-thumb:horizontal {
  border-radius: 15px;
  background-color: tomato;
}

Answer 2

You need to link the pseudo decorator with the div to apply the style. This means the vertical thumb comes from the body or HTML tag. Horizontal thumbs are for inner divs.

#bars-chart-container::-webkit-scrollbar {
  width: 7px;
}
#bars-chart-container
::-webkit-scrollbar-thumb:horizontal {
  border-radius: 8px;
  background-color: rgba(92, 92, 92, 0.5);
}

This probably won't prevent the inner div's vertical thumb from disappearing, but from what I've seen so far in your images, you don't need to show this. I don't think this could be achieved any other way.