在Webkit的CSS中设置输入范围较低的样式？

我正在使用CSS设置

input[type=range]

的样式，并使用

thumb

和

track

所有三个（

-ms

，

-moz

，

-webkit

）浏览器都有正确的前缀

但是，我不知道哪种厂商前缀适合Webkit浏览器上的样式

progress

，比如Chrome。 在Internet Explorer和Microsoft Edge上，

-ms fill lower

非常有效。
在Firefox上，使用

-moz-range-progress

解决了这个问题

输入[类型=范围]{
/*删除默认webkit样式*/
-webkit外观：无；
/*修复FF无法应用焦点样式错误*/
边框：1px纯白；
/*在FF中正确调整轨道尺寸所需*/
宽度：350px；
}
/*Webkit、Chrome和Safari*/
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：300px；
高度：5px；
背景：#ccc；
边界：无；
边界半径：3px；
}
输入[类型=范围]：-webkit滑块拇指{
-webkit外观：无；
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：#004d66；
利润上限：-7px；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：焦点：--webkit滑块可运行轨迹{
背景：ddd；
}
/*moz://a Firefox*/
输入[类型=范围]：-moz范围轨迹{
/*宽度：150px；
高度：5px*/
背景：#ccc；
边界：无；
边界半径：3px；
}
输入[类型=范围]：-moz范围拇指{
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：#004d66；
}
输入[类型=范围]：-moz范围进度{
背景：#33ccff；
边界半径：10px；
高度：5px；
}
/*将轮廓隐藏在边框后面*/
输入[类型=范围]：-moz focusring{
外形：1px纯白；
轮廓偏移：-1px；
}
/*微软*/
输入[类型=范围]：-ms轨道{
高度：2倍；
/*从曲目中删除背景颜色，我们将使用ms fill lower和ms fill upper*/
背景：透明；
/*用透明的边框为较大的拇指留出空间*/
边框颜色：透明；
边框宽度：6px0；
/*删除默认的记号*/
颜色：透明；
}
输入[类型=范围]：-ms thumb{
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：#004d66；
页边顶部：1px；
}
输入[类型=范围]：-ms填充下限{
背景：#33ccff；
边界半径：10px；
高度：5px；
}
输入[类型=范围]：-ms填充上限{
背景：#ccc；
边界半径：10px；
}
输入[类型=范围]：焦点：-毫秒填充下限{
背景：#44ddff；
}
输入[类型=范围]：焦点：--ms填充上限{
背景：ddd；
}

---

据我所知，这是不可能的。下面是Chrome的一个片段，显示了

的shadowDOM元素：

#影子根（用户代理）

---

一般来说，您可能想看看，它是一个用于自定义范围滑块的跨浏览器代码生成器。但是，它没有提供一种方式来设置

：-moz范围进度

区域的样式。我发现的其他示例（包括此代码段）使用了已弃用且不再起作用的阴影穿透选择器。对于完全跨浏览器的解决方案，您必须创建自己的元素。

您能否提供一个，最好是作为问题中的一个片段。@MrLister我添加了我的样式表。代码是我的基础。

<input type="range">
    #shadow-root (user-agent)
        <div style="-webkit-appearance:inherit">
            <div pseudo="-webkit-slider-runnable-track" id="track">
               <div id="thumb">
               </div>
        </div>
    </div>
</input>