Can't change srollbar css.

Littlegolden

I added the following code to custom CSS, and it worked on my personal page, but it didn't work on flarum.

.app::-webkit-scrollbar {
    height: 8px;
    margin: 0px 16px;
}

.app::-webkit-scrollbar-button {
    color: white;
}
.app:not(:hover)::-webkit-scrollbar-thumb {
    background: transparent;
}
.app::-webkit-scrollbar-thumb {
    background: rgb(209, 209, 211);
    border-radius: 16px;
}
.app:not(:hover)::-webkit-scrollbar-track {
    background: transparent;
}
.app::-webkit-scrollbar-track {
    background: rgb(242, 243, 244);
    border-radius: 20px;
}

[deleted]

Littlegolden Have you tried using !important to override any other setting (although I don't think there are any in Flarum) ? This isn't ideal, but may be necessary.

I just tested on my forum, and it works fine without the need to override (which I expected to be honest). Another point is that the CSS you have is webkit specific - it won't work in IE or Firefox for example, but there are JS based libraries you can use that are cross browser.

Littlegolden

[deleted] Still not working...

If I use body::-webkit-scrollbar... the web brower's scrollbar can be changed. But flarum pages' scrollbar still can't be changed.

[deleted]

Littlegolden Are you referring to the text editor in Flarum, or the scrollbars in general ? I can't replicate this at my end.

Littlegolden

[deleted] Yes, I want to change each of the default scrollbars in the flarum (text editor, code box).

I tried to change the class selector in front of the scrollbar pseudo-class to the text editor's class, or to the code box's class, which had no effect.

nav.IndexPage-nav.sideNav::-webkit-scrollbar......

or

.Post-body pre code::-webkit-scrollbar......

all doesn't work...

[deleted]

Littlegolden That's probably because those elements are compiled (I think). @clarkwinkelmann or @luceos would know for sure.

clarkwinkelmann

It works for me when I replace .app with .IndexPage-nav in your example. nav.IndexPage-nav.sideNav also works for me (Chrome 77 on Ubuntu 16.04).

Make sure you cleared the cache or work with debug mode to see each of your changes immediately.