如何在 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 开发者工具中查看范围输入拇指的样式?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 chrome 开发工具中同时查看元素选项卡和源选项卡