How can I view the default css styles for -webkit-scrollbar and -webkit-scrollbar-track etc?

Question

I'm trying to see what default css values (possibly source code?) are for webkit psuedoelements so that I can create custom webkit items that are very similar to the default, but slightly customized.

These items are shadow elements that don't show up in the DOM. you can enable 'Show user agent shadow DOM' in chrome devtools settings, per Inspect webkit-input-placeholder with developer tools, but i'm still not seeing elements in the DOM. I suspect the styles are being provided by user agent stylesheet for these webkit items

score -2 · Answer 1 · answered Oct 26 '19 at 23:57

-2

Load a page utilizing the CSS in question with your browser, then you can use developer features to inspect it.

Right-click the page
In Chrome, the menu choice is 'Inspect'
The screen will split, the page source appears on the bottom of your screen (not sure what happens if browsing on a phone)
On the bottom of the screen, you will see the html, on the bottom right you will see the pertinent CSS you select some html on the right.
Note there is a link to the style sheet on the far right, click to view
Unfortunately, the link is hard to read because all spaces and linefeeds have been removed, but you can paste it into an editor and make it easier to read

answered Oct 26 '19 at 23:57

ActualRandy

180
1
8

these are shadow items that dont show up in the DOM (see my edited explanation) so this does not work – Stevie Oct 27 '19 at 00:54
Then get Fiddler, which will show you everything. https://fiddler.net/ – ActualRandy Oct 27 '19 at 02:13
Doesn't work for scrollbar like the question asked, edit the question or delete it. – Tigerrrrr Mar 19 '22 at 19:58
The Fiddler domain was bought someone else, what @ActualRandy is talking about is here: https://www.telerik.com/fiddler – Tigerrrrr Mar 19 '22 at 19:59

How can I view the default css styles for -webkit-scrollbar and -webkit-scrollbar-track etc?

1 Answers1