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

Posted

技术标签:

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

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

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


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

【问题讨论】:

【参考方案1】:

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

命中

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

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

【讨论】:

【参考方案2】:

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

【讨论】:

以上是关于如何在 Chrome 开发者工具中查看范围输入拇指的样式?的主要内容,如果未能解决你的问题,请参考以下文章

IE和Edge中的范围滑块拇指css问题

如何在 chrome 开发工具中同时查看元素选项卡和源选项卡

使用曲线将输入范围弧形拇指连接到滑块

如何在 Chrome 开发工具或 Firefox 开发工具中查看 JS 正在改变我的元素的样式?

在 React 中,如何在范围滑块的拇指上创建一个气泡头

如何精确找到输入的拇指位置[type =“range”]?