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

cyt*_*nny 9 html css google-chrome developer-tools google-developer-tools

我正在使用物化css为我的网站,目前我正在尝试改变范围输入的拇指样式(即你点击并按住以更改滑动条的值)

在改变时,我想首先改变Chrome开发者工具的价值,看看它在我的CSS中做出改变之前的样子.但是,我只能在开发人员工具中找到范围输入的样式,而不能找到拇指的样式.有没有办法在Chrome开发者工具中看到拇指的风格?


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

AA2*_*992 17

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

击中

F12 > F1 to open DevTools >> Settings >> Preferences
Run Code Online (Sandbox Code Playgroud)

您将在Elements下显示"显示用户代理阴影DOM "选项


Shadow DOM DevTools


Abd*_*bdi 11

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

步骤1

在此输入图像描述