html5进度firefox背景色

Posted 2023-02-24

【中文标题】html5进度firefox背景色

【英文标题】：html5 progress firefox background color

【发布时间】：2016-12-12 10:12:20

【问题描述】：

我想使用 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 中很重要吗？ 任何想法如何让它正常工作？

【问题讨论】：

来自官方文档，developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar，我也在 FF 中运行了小提琴，它似乎工作正常，即如果你可以保留 webkit-appearance:none

【参考方案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）。

【讨论】：

谢谢，这就行了。有趣的是 -moz-progress-bar 适用于与 -webkit-progress-bar 不同的东西。