如何在Chrome DevTools中查看::-webkit-file-upload-button等WebKit元素样式？

别担心，Chrome里完全有办法查看这个WebKit专属伪元素的样式，我给你两种实用的操作方式：

方法一：手动指定伪元素选择器 #

• 先在Elements面板精准选中你的<input type="file">元素。
• 切换到Styles面板，找到顶部显示当前选中元素选择器的输入框，在现有选择器末尾加上::-webkit-file-upload-button（比如原选择器是input[type="file"]，就改成input[type="file"]::-webkit-file-upload-button），按下回车后，就能看到这个上传按钮的专属样式，包括你要找的background-color/background-image属性。

方法二：开启用户代理Shadow DOM显示 #

Chrome默认会隐藏浏览器内置元素的Shadow DOM结构，开启后就能直接选中上传按钮节点：

• 点击DevTools右上角的三个点图标，打开设置面板。
• 在左侧菜单找到「Elements」选项，勾选「Show user agent shadow DOM」。
• 回到Elements面板，展开<input type="file">的折叠节点，就能看到它的Shadow DOM结构，里面对应上传按钮的节点（通常是<button>标签）就是::-webkit-file-upload-button的实际载体，选中它后Styles面板会自动展示其样式。

补充：找不到background属性怎么办？ #

如果在Styles面板没直接看到background-color/background-image，可以切换到Computed面板——这里会展示元素最终生效的所有样式（包括继承、用户代理样式及自定义样式），搜索「background」就能快速定位到你需要的属性值。

内容的提问来源于stack exchange，提问作者deathangel908