html5 progress firefox background color

Question

I want to use the HTML5 progress element and style it myself. This works fine so far, the only thing is, that Firefox displays the background color wrong.

Please see the snippet below: In Chrome and Safari the background-color of the body and the progress-value are the same, in Firefox (on Mac, V50.0.2) though, the progress-value has a slightly different blue - but the value is the same.

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>

While there is a ::-webkit-progress-value attribute, there is nothing like that with the -moz- prefix.

Is this a big in Firefox? Any ideas how to get this working correctly?

Answer 1

Try to use ::-moz-progress-bar

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

Something like below -

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>

Hope this will help you in some way (y).