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>
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
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?
You need to enable exposure of is attribute in settings, I think in SEO section
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
Show screenshots of element id attribute and paste the code you used in html element
You can find them below. I tried to apply it to also the text inside the group, just in case, but neither worked
Hi @canlimert , try adding # symbol before id. Like this #group123 . Other code stays the same
Can not apply scroll bar to text element, only containers like groups or repeating groups