Html CSS中的自定义样式进度条

我有一个进度条，我想改变它的默认样式

我尝试了一些方法，但没有达到我的预期效果

我想更改进度条的背景色和边框半径

当我设置背景色时，它会从默认的蓝色变为绿色，而不是我设置的颜色

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

---

}

您必须使用HTML5进度条工具包。这些是当前设置HTML5进度条样式的全部选择器：

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

因此：

进展{
边界半径：7px；
宽度：80%；
高度：22px；
左边缘：-11.5%；
盒影：1px1p4pRGBA（0,0,0,0.2）；
}
进度：：-webkit进度条{
背景颜色：黄色；
边界半径：7px；
}
进度：：-webkit进度值{
背景颜色：蓝色；
边界半径：7px；
盒影：1px1p5px3pRGBA（255,0,0,0.8）；
}
进度：：-moz进度条{
/*风格规则*/
}

---

33%

如何更改绿色可能重复？

progress[value]：-webkit progress value{background color:your color choice；}

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}