Scrollbar styling

For my crossplatform prototype, I need to hardwire the scrollbar appearance lest it be overridden by the OS the viewer’s browser runs on. Am I right in assuming that this currently requires Firefox because webkit does not support scrollbar-color:?
On Webkit the scrollbar can be targeted only via a pseudo-class ::-webkit-scrollbar-track and there is no way I can use that, correct?

yes, since we do not support creation of custom CSS selectors, you have to define those in a custom <style> section in the header_include.html-file. Here a little example which uses ::webkit-scrollbar to style it.

Here an example which uses a state to change it: (328.3 KB)

I do not know how you would like to change the appearance … if it is state-based (like in the example above), you have to look up the css-selector in the browser developer tools:

and use it inside your style-declaration:

<!-- styling for the scrollbar: -->
👇👇👇👇👇👇👇👇👇👇👇👇 */
.D1413447520_Sid168490364l::-webkit-scrollbar {
    background: red;

/* state: 'blue scrollbar' */
.D1413447520_Sid1176744813l::-webkit-scrollbar {
    background: blue;

Thank you, Felix. I will try this today.

It’s working. Another problem solved. Awesome!
I wrapped the entire prototype inside a themed cell whose children also switch when I switch the skins, so I am using

.id1601889504l *::-webkit-scrollbar{
(style goes here)

.id1601889504l_Sid1595560258l *::-webkit-scrollbar{
(style goes here)

to avoid having to style individual scroll bars. I hope these classes are fairly persistent now because then I can just set this up as a template and forget about it.

Thanks so much for the ongoing help!