it-swarm.com.de

Wie kann ich die Farbe eines Fortschrittsbalkenwerts in HTML ändern?

progress {
  border: none;
  width: 400px;
  height: 60px;
  background: crimson;
}

progress {
  color: lightblue;
}

progress::-webkit-progress-value {
  background: lightblue;
}

progress::-moz-progress-bar {
  background: lightcolor;
}
<div>
  <progress min="0" max="100" value="63" />
</div>

Ich habe fast alles versucht, aber die Wertfarbe des Fortschrittsbalkens bleibt gleich. Der einzige Browser, der auf eine Änderung reagiert, ist IE. Firefox erlaubt nur die Hintergrundfarbe zu ändern. Chrome zeigt überhaupt nichts. Können Sie feststellen, was mit meinem Code falsch ist?

5
CeeJay

progress {
  border: none;
  width: 400px;
  height: 60px;
  background: crimson;
}

progress {
  color: lightblue;
}

progress::-webkit-progress-value {
  background: lightblue;
}

progress::-moz-progress-bar {
  background: lightcolor;
}

progress::-webkit-progress-value {
  background: red;
}

progress::-webkit-progress-bar {
  background: blue;
}
It will work on webkit browser, like this example

<div>
  <progress min="0" max="100" value="63" />
</div>

10
Renzo Calla

es ist ziemlich begrenzt, was Sie tun können, aber dies muss den Trick tun

progress {
   -webkit-appearance: none;
}
progress::-webkit-progress-bar-value {
  -webkit-appearance: none;
  background: orangered;
}
0
Joaquin Diaz