Styling Scrollbars on Mozilla Firefox

Created: May/28/2022

For some reason, Firefox doesn't allow custom CSS scrollbar styling like Chrome or other browsers do.
However, not many people are aware of the styling features it DOES have.

It's not a lot, but it's something. And anything is better than the Firefox default scrollbars.

html {
    scrollbar-color: #00ff00 #ffffff;
    scrollbar-width: auto;
        }

Yup, that's all we got.

For scrollbar color, the first hex defines the scrollbar thumb color, while the second defines the track color.

For the width you have three options, auto (default), thin, or none.

Some examples:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(I think it's common sense to know you can't see these if you're not using a Firefox based browser)

Hidden Non-Native Scrollbar Setting
Aparently there's also a setting hidden in Firefox's configuration page that changes the scrollbars entire appearance. But it only appears on your end.

Just type about:config into your url bar,
and then search widget.non-native-theme.scrollbar.style

Then you can change the value anything from 0-5 to get different appearances.