Edit Scrollbars with CSS! (webkit only)
Replies
So I just found this code works for the scrollbars in profiles and pet profiles, and I thought I'd share for those who are tired of making scrollbar overlays or wanted to edit them in a simple way! I was going to post this in the CSS Compendium, but since that hasn't been updated since December I didn't know if I should, but if I can let me know!
What browser does this work on?
This code, as sad as it is, does not work in Firefox. Yes, I know many people in Subeta play it with Firefox, but there is no Mozilla equivalent for this webkit code. For Mozilla, you can only use jquery, and we all know it doesn't work here (Subeta should really implement it!)
This code works in ALL webkit supported browsers, those most known are:
► Google Chrome ► Safari ► Playstation 3's web navigator (does anyone use it? i would if I had a keyboard for it) ► Android (mobile) ► Blackberry (mobile) ► Nokia S60 (mobile) ► Apple iOS (mobile)
I use Google Chrome and Android, so I can assure it works there!
If anyone finds a mozilla equivalent for this code, please post it here. I'd like to add it up with the webkit code and make this more complete!
Alright, let's start with the code itself.
::-webkit-scrollbar {
width: ANY SIZE;
}
::-webkit-scrollbar-track { background-color: ANY COLOR; }
::-webkit-scrollbar-thumb { background-color: ANY COLOR; }
More pseudo elements
::-webkit-scrollbar { /* 1 / }
::-webkit-scrollbar-button { / 2 / }
::-webkit-scrollbar-track { / 3 / }
::-webkit-scrollbar-track-piece { / 4 / }
::-webkit-scrollbar-thumb { / 5 / }
::-webkit-scrollbar-corner { / 6 / }
::-webkit-resizer { / 7 */ }
Courtesy of css-tricks
Here's a FULL EXPLANATION OF WEBKIT SCROLLBARS, much better explained than what I can explain, it's short and to the point!
Since this is mainly a div code, for the looks of it, I'm sure you can also add borders and box-shadows, even multiple colors or a pattern for it! That I haven't tried yet, but if you want to try this code out and see what it does please post your results, I'd like to see them!
I have a preview of a code like this, simply edited, in the boxes of my profile (hover-on) HERE.
Alright, I hope you can find this code useful and I gave a small good explanation! Thanks for reading this guys!
ya, the webkit scollbars aren't very cross-browser compatible, which is the main reason people user scrollbar overlays or other tricks to hide scrollbars.
I wish Firefox could implement some webkit on their browser too, it'd make html editing so much better! I'm trying to find a firefox version for this code. And I know :) sometimes I don't realize there are overlays and it's scroll-able XD
Thanks , this is pretty cool even though it's webkit only.
I think this is worth checking out, guys! I also added it to the useful threads section of the useful CSS board.
