如何在Chrome开发者工具中查看范围输入的缩略图样式？
How to see the style of the thumb of range input in Chrome developer tools?
我正在为我的网站使用 materialize css，目前我正在尝试更改范围输入的拇指样式（即您单击并按住以更改滑块值的东西）
并且在更改 sytle 时，我想先更改 Chrome 开发人员工具上的值，以便在我的 CSS 中进行更改之前查看它的外观。但是，我只能在开发人员工具中找到范围输入的样式，但找不到拇指的样式。有没有办法让我在 Chrome 开发者工具中看到拇指的样式？
P.S。主要是 HTML5 范围输入。 noUISlider 由 Javascript 创建，在开发人员工具上可见。抱歉，HTML5 范围输入没有 id，所以我只能 link 到离它最近的 header。
您可以在 DevTools 控制台中启用查看阴影 DOM 并查看与阴影 DOM 元素关联的样式。
命中
F12 > F1 to open DevTools >> Settings >> Preferences
您将在元素下找到选项 显示用户代理影子 DOM
只是想添加到已接受的答案中，因为 UI 自提出原始问题以来已经发生了很大变化，并添加了视觉方面的内容：
我正在为我的网站使用 materialize css，目前我正在尝试更改范围输入的拇指样式（即您单击并按住以更改滑块值的东西）
并且在更改 sytle 时，我想先更改 Chrome 开发人员工具上的值，以便在我的 CSS 中进行更改之前查看它的外观。但是，我只能在开发人员工具中找到范围输入的样式，但找不到拇指的样式。有没有办法让我在 Chrome 开发者工具中看到拇指的样式？
P.S。主要是 HTML5 范围输入。 noUISlider 由 Javascript 创建，在开发人员工具上可见。抱歉，HTML5 范围输入没有 id，所以我只能 link 到离它最近的 header。
您可以在 DevTools 控制台中启用查看阴影 DOM 并查看与阴影 DOM 元素关联的样式。
命中
F12 > F1 to open DevTools >> Settings >> Preferences
您将在元素下找到选项 显示用户代理影子 DOM
只是想添加到已接受的答案中，因为 UI 自提出原始问题以来已经发生了很大变化，并添加了视觉方面的内容：