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

【问题标题】：How to see the style of the thumb of range input in Chrome developer tools?如何在 Chrome 开发者工具中查看范围输入拇指的样式？
【发布时间】：2017-03-09 14:05:10
【问题描述】：

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

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

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

【问题讨论】：

标签： html css google-chrome developer-tools google-developer-tools

【解决方案1】：

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

命中

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

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

【讨论】：

【解决方案2】：

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

【讨论】：