CSS custom Firefox scrollbar style

Many people know that using css's:: - webkit scroll bar can define the style of browser scroll bar, but this method is invalid in Firefox.

In fact, Firefox provides two unique attributes to define the scroll bar style. There are only two, which is better than none!

Direct code:

 * {   scrollbar-color:#f33 green;   scrollbar-width:thin; }

Relevant explanations:

 /* Keyword values */ scrollbar-width: auto; /*System default scroll bar width*/ scrollbar-width: thin; /*The width of the thin scroll bar provided by the system, or narrower than the default scroll bar width*/ scrollbar-width: none; /*The scroll bar is not displayed, but the element can still scroll*/ /* Global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset;

 /* Keyword values */ scrollbar-color: auto; /*In the absence of any other relevant scroll bar color attributes, the track portion of the scroll bar is rendered by default.  */ scrollbar-color: dark; /*The black scroll bar is displayed. It can be a dark variant of the scroll bar provided by the platform or a customized scroll bar with dark color.  */ scrollbar-color: light; /*Displays a lightweight scroll bar, which can be a slight variation of the scroll bar provided by the platform, or a custom scroll bar with a light color.  */ scrollbar-color: rebeccapurple green; /*Apply the first color to the scroll bar thumb and the second color to the scroll bar track  */ /* Global values */ scrollbar-color: inherit; scrollbar-color: initial; scrollbar-color: unset;

Note: This attribute only supports Firefox 64 and above browsers!

Compatibility is as follows: