html5 进度 firefox 背景颜色

Question

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

请看下面的片段：在 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)。

html5 进度 firefox 背景颜色

html5 progress firefox background color

html

css

firefox

progress

progress-bar