Firefox doesn't support custom scrollbar colours. There's a request to add this that's been open for 16 years, with no sign of a resolution:
77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)[
^]
If you really need to style the scrollbars, then you're going to need a solution which hides them and replaces them with custom elements. For example:
jScrollPane - cross browser styleable scrollbars with jQuery and CSS[
^]
NB: Your styles also won't work in IE or Edge. In IE, you can modify the colour using a different syntax (
scrollbar-face-color
). Edge does not support either the IE or Chrome options, so once again, you'll need a custom solution like jScrollPane.
Can I use... CSS scrollbar styling[
^]