Scroll me...
Sometimes, the content of an element is bigger than the element itself, but you still want people to be able to see all of it, so you set the css of the element to overflow: scroll to add a scrollbar to it.
Then, to your horror, an ugly grey scrollbar is added to your page, which totally ruins the themeing you've worked so hard on, so what can you do?
Well... It turns out that many modern browsers have pseudo element selectors that you can use to style the scrollbars on your page, and seeing as it can be a bit of a pain reloading a page again and again to see what each one does, I figured why not make a simple little pen to let you style scrollbars live in the browser, and then copy the code to your own website once you're done.
Hey there, don't mind me. I'm just chilling down here.
Copy This Code
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: blue orange;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}