html - 如何在 Chrome 开发者工具中查看范围输入拇指的样式？

Question

我正在为我的网站使用物化 css，目前我正在尝试更改范围输入拇指的样式（即您单击并按住以更改滑动条的值的东西）

在更改样式时，我想先更改 Chrome 开发人员工具的值，然后再更改我的 CSS。但是，我只能在开发人员工具中找到范围输入的样式，而不是拇指的样式。有没有办法可以在 Chrome 开发者工具中看到拇指的样式？

PS主要是HTML5范围输入。noUISlider 由 Javascript 创建，在开发人员工具中可见。抱歉，HTML5 范围输入没有 id，所以我只能链接到离它最近的标题。

score 33 · Accepted Answer

您可以在 DevTools 控制台中启用查看 Shadow DOM 并查看与 Shadow DOM 元素关联的样式。

打

F12 > F1 to open DevTools >> Settings >> Preferences

您将在 Elements 下找到选项为Show user agent shadow DOM

score 2 · Accepted Answer

只是想添加到已接受的答案中，因为自从提出原始问题以来 UI 已经发生了很大变化，并添加了一个视觉方面：

2 回答 2