Problem with customizing Scroll Bar

[canlimert]

I did some research in the forum and got help from Chatgpt that in order to customize the scroll bar color, I need to add an HTML element with CSS code in it. I did it with the code below but it does not work. Can anybody help how I can make it work?

<style>
/* Customize scrollbar for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px; /* Scrollbar width */
}

::-webkit-scrollbar-track {
    background: #cccccc; /* Track color */
}

::-webkit-scrollbar-thumb {
    background-color: #dddddd; /* Scrollbar color */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #f1f1f1; /* Optional: adds padding */
}

/* Customize scrollbar for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}
</style>

[boston85719]

You mean AI is not able to tell you how to make it work?

in front of ::-webkit-scrollbar, you need to add the element ID

[canlimert]

Haha nope, AI is not helpful

Thanks for the response! But I cant find the ID Attribute on that screen for the element I want to apply this change to. Do you think it is because I havent upgraded yet as I am still in development mode?

[boston85719]

You need to enable exposure of is attribute in settings, I think in SEO section

[canlimert]

I was able to find it, defined an id to both the group container and the label, and added them both to the CSS, but it did not work

[boston85719]

Show screenshots of element id attribute and paste the code you used in html element

[canlimert]

You can find them below. I tried to apply it to also the text inside the group, just in case, but neither worked

[kirsnvartem]

Hi @canlimert , try adding # symbol before id. Like this #group123 . Other code stays the same

[canlimert]

this didnt work either…

[boston85719]

Can not apply scroll bar to text element, only containers like groups or repeating groups