html5进度firefox背景色

Question

我想使用 HTML5 进度元素并自己设置样式。 到目前为止，这工作正常，唯一的问题是 Firefox 显示背景颜色错误。

请看下面的sn-p： 在 Chrome 和 Safari 中，主体的背景颜色和进度值是相同的，但在 Firefox（在 Mac 上，V50.0.2）中，进度值的蓝色略有不同 - 但值是相同的。

body{
  background-color: #3c00ff;
}

progress{
  height: 1rem;
  width: 10rem;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: red;
}

progress::-webkit-progress-bar{ background-color: red; }
progress::-webkit-progress-value{ background-color: #3c00ff; }

<progress value="10" max="20"></progress>

虽然有 ::-webkit-progress-value 属性，但没有 -moz- 前缀。

这在 Firefox 中很重要吗？ 任何想法如何让它正常工作？

Answer 1

尝试使用::-moz-progress-bar

progress::-moz-progress-bar {
  background-color: #3c00ff;
}

类似下面的东西 -

body{
  background-color: #3c00ff;
}

progress{
  height: 1rem;
  width: 10rem;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: red;
}

progress::-webkit-progress-bar{ background-color: red; }
progress::-webkit-progress-value{ background-color: #3c00ff; }

progress::-moz-progress-bar {
  background-color: #3c00ff;
}

<progress value="10" max="20"></progress>

希望这对您有所帮助（y）。