CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-devtools
deathangel908
deathangel908

Reputation: 9689

How to check webkit element styles in chrome devtools?

I have <input type="file" on my page. I want ti view file's button styles in chrome dev tools. Unfortunately if I this element it show styles for element whole input ( I mean text + button). I want to inspect styles for ::-webkit-file-upload-button. For example firefox shows all styles when a select the element. Is there any way I can do this in chrome?

The images below represents an example. It's clear a button in the image was styled using ::-webkit-file-upload-button, but there're no background-color/bacgrkound-image in styles list. How do I view styles for webkit-element? enter image description here

Upvotes: 6

Views: 4213

Answers (1)

deathangel908
deathangel908

Reputation: 9689

As @wOxxOm answered I should enable Shadow DOM in devtool settings.enter image description here

Upvotes: 10

Related Questions