Html 如何更改Chrome中webkit进度值的颜色？

我花了数小时研究类似的问题，但我没有尝试改变Chrome中选定范围的填充颜色。更改

-webkit进度值

和

-webkit进度条

中的颜色不起任何作用。我也试过一些香草JS，但也没用

我可能对这个问题视而不见。我错过了什么

另外，我无法让我的代码在堆栈中工作（抱歉），但我有一个

输入[type=“range”]{
保证金：0；
填充：0；
边界：0；
大纲：无；
背景：透明；
宽度：100%；
高度：22px；
边界半径：3px；
-webkit外观：无；//铬重置
}
输入[type=“range”]：-webkit滑块可运行轨迹{
高度：3倍；
边界半径：2px；
背景色：#434b52；
过渡：所有。2轻松；
}
输入[type=“range”]：-webkit进度值{
背景色：#ff0000；//红色
}
输入[type=“range”]：-webkit进度条{
背景色：#00ff00；//绿色
}   
输入[type=“range”]：-webkit滑块拇指{
-webkit外观：无；//铬重置
框大小：边框框；
高度：16px；
宽度：16px；
边界半径：50%；
边框：实心2px#2bdeee；
背景色：#25bbc8；
光标：指针；
利润上限：-7px；
}
.kx范围{
填充：4px8px；
}
html{
背景色：#262a2f；
边缘顶部：50px；
}

：：-webkit进度值

仅适用于

元素。我不相信（IE除外）这两段赛道的风格是你想要的。“在IE中，您可以为轨迹的上部（拇指的右侧）和下部（拇指的左侧）区域指定完全不同的样式。”-这里再次感谢@DumitruChirutac。正是我所需要的——简单而整洁。如此多的示例有太多的js:）

：-webkit进度值

仅适用于

元素。我不相信（IE除外）这两段赛道的风格是你想要的。“在IE中，您可以为轨迹的上部（拇指的右侧）和下部（拇指的左侧）区域指定完全不同的样式。”-这里再次感谢@DumitruChirutac。正是我所需要的——简单而整洁。这么多的例子有太多的js:）