I can't use the scroll bar style

[Kukaina]

My system is Windows 11，I wrote this code in index.scss, but it does not take effect. Other codes written in index.scss can take effect.
`html {
scrollbar-width: thin; /* Firefox /
scrollbar-color: blue orange; / Firefox */
}

body::-webkit-scrollbar {
width: 12px;
}

body::-webkit-scrollbar-track {
background: orange;
}

body::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}`
My scrollbar still looks like this

[Skaidon]

Same issue here.

[federico-terzi]

This worked for me on Windows

body {
  scrollbar-color: hotpink blue;
}

[Natural-selection1]

But if you try all the ::-webkit-scrollbar related pseudo-classes, you'll find that it doesn't work at all

[CaseSens]

The issue stems from this code here:

html {
scrollbar-width: thin; /* Firefox /
scrollbar-color: blue orange; / Firefox */
}

Your comment syntax is broken and breaks the rest of your css.

Try removing the Firefox comments and you'll see that it works. I tested it and it worked on my Windows 11 machine.

[CaseSens]

Proof:

[MichaelCharles]

* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

The above isn't working for me on Mac. It'll change the width, but not the color.

[FabianLars]

webkit doesn't support scrollbar-* styles. you'll need to try it with the ::-webkit-* pseudo elements (Mdn), for example for blue orange this may work (not tried myself since i'm on windows rn)

::-webkit-scrollbar-thumb {
  background: blue;
}

::-webkit-scrollbar {
  background: orange;
}

[MichaelCharles]

That isn't working for me either.

I had been using

::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: hsl(var(--scrollbar-track));
  border-radius: var(--scrollbar-radius);
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--scrollbar-thumb));
  border-radius: var(--scrollbar-radius);
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--scrollbar-thumb) / var(--scrollbar-hover-opacity));
}

With the variables properly defined, I think that used to work?

I'm opening up an older Tauri project I haven't touched for months and trying to work with it again. The above is the CSS that I had been using; however, now when I run the app, my scrollbars are just grey.

I tried removing all of my css and just doing

* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

::-webkit-scrollbar-thumb {
  background: blue;
}

::-webkit-scrollbar {
  background: orange;
}

for simplicity's sake, but that doesn't fit it either.

[MichaelCharles]

I was able to get styled scrollbars working by using overlayscrollbars.

I feel like ::-webkit-scrollbar should work, and if memory serves, it used to work, but for whatever reason it isn't working anymore. At least not on Mac. For now the overlayscrollbars approach will be fine for me though.

[MichaelCharles]

I threw together a quick guide to setting up overlayscrollbars with React+Tauri+Tailwind.