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

时间:2016-10-27 02:45:19

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

我正在使用materialize css作为我的网站,目前我正在尝试更改范围输入的缩略图样式(即您单击并按住以更改滑块的值)

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

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

1 个答案:

答案 0 :(得分:12)

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

命中

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

您可以在Elements下找到显示用户代理影子DOM

的选项


Shadow DOM DevTools