Question

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

请参阅下面的代码：在Chrome和Safari中，正文的背景颜色和进度值是相同的，但在Firefox（Mac，V50.0.2）中，进度值的蓝色略有不同 - 但值相同。 / p>

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;
}

如下所示 -

＆＃13;

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;
}

＆＃13;

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

＆＃13;

希望这会以某种方式帮助你（y）。

html5进度firefox背景颜色

1 个答案: