Styling Firefox scrollbar-CodePudding

i'm trying to style Firefox's scrollbar without any success. I think it's good to mention that i'm working with tailwind. I've tried the following :


::-moz-scrollbar-thumb{
  scrollbar-color: red;
} 

 html{
  scrollbar-width: thin;
  scrollbar-color: red;
} 

.scroller::-moz-scrollbar-thumb {
  height: 30px;
  background-color: #0A4C95;
} 

 .scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

 body{
  scrollbar-width: thin;
  scrollbar-color: red !important

But there's no change. is it possible to style it?

CodePudding user response：

Are you see this answer ? Custom CSS Scrollbar for Firefox

However, I found this in Mozilla developer website and it's work for me:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

CodePudding user response：

Unfortunately, custom scrollbar is not fully supported by Firefox browser. why? I don't know. to help see that, please open this link in Firefox then opera and chrome.

[https://codepen.io/GhostRider/pen/oNvoNv][1]

I did and on firefox, there was no custom scrollbar, but in other browsers, I saw them all.

there might be an advanced way to do it. good luck.