firefox allows you to change the color of scrollbars and switch between 2 (very thin) thickness options.
but you can't customize them completely like you can with webkit on chromium.
this box uses a custom scrollbar i made!
using a range <input> element and some javascript
the <script> is the last element in the body of this page
you can still use this in places that allow css but no javascript, the scrollbars will only be cosmetic
hi. gelmew here. jackie chan might have some cool kicks, but i really could not have done this without my best friend, derp pee pee n
how this works
look at the page in your browser dev tools
everything other than the .scrollBox and its contents are for styling the windows 95 window border.
the .scrollBox contains the actual content (.boxContent) as well as the scrollbar (.scrollBar) side by side.
as the container, .scrollBox is just there to be a flex container, and to set the size of the content. it doesn't do anything else.
.boxContent
.boxContent is this white text box you are reading. this element and .scrollBar have to be the Only child elements inside .scrollBox for the code to work.
You can put whatever you want inside .boxContent though. it's just a div.
.scrollBar
.scrollbar is the entire element on the right. it's an input element of the "range" type, which is usually a slider type thing like this:
.scrollBar is one of these oriented vertically which makes it a pain in the ass to style on chrome for some reason....
you can style the track and thumb button on these elements with these CSS rules for firefox:
input[type=range].scrollBar::-moz-range-track {}
input[type=range].scrollBar::-moz-range-thumb {}
and these rules (sort of..) for chrome:
input[type=range].scrollBar::-webkit-slider-runnable-track {}
input[type=range].scrollBar::-webkit-slider-thumb {}
I made the 3d bevel effect with the box-shadow property. The track loads a 2x2px dither .png for the checkerboard effect, so if you use this on your site you'll need to save that.
the scripting
The javascript is needed to make this input element work like a scrollbar. its a hack.
if you inspect this page with your browser dev tools, you'll find the javascript at the end of the page.
you'll need to copy that script element into your page if you want the scrollbars to work.
how to use on your website
HTML:
The HTML of the top left window on this page. You can use multiple of these, like on this page.
CSS:
The style for this page, edit it to make it work on your site. You will need this to make the HTML look right.
Script:
Paste this script into your page (at the end of the body tag) to make the scrollbars functional.
heres a really long ass box you can scroll through
Penis