Benutzerdefinierter Styling-Fortschrittsbalken in CSS

Ich habe einen Fortschrittsbalken und möchte ihn vom Standardstil abweichen lassen.

Ich habe einiges ausprobiert, aber es hat nicht wie erwartet funktioniert.

Ich möchte die Hintergrundfarbe und den Randradius des Fortschrittsbalkens ändern.

Wenn ich die Hintergrundfarbe festlege, ändert sie sich von der Standardfarbe Blau zu Grün und nicht zu der von mir festgelegten Farbe.

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

Du kannst das … sehen Geige.

Wenn ich das eingestellt habe background-color Die Farbe wechselt von Blau zu Grün, das wiederum in ein anderes Blau wechseln muss.

Und ich möchte, dass der Fortschrittsbalken eine glatte Kante hat.

Ich habe es eingestellt border-radius aber auch das hat nicht geklappt.

.amount-progress {
  width: 80%;
  margin-left: -11.5%;
  height: 22px;
  background-color: #0091EA;
}

Sie müssen mit dem HTML5-Fortschrittsbalken-Kit arbeiten. Dies sind derzeit die gesamten Selektoren für die Gestaltung des HTML5-Fortschrittsbalkens:

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

So :

progress {
  border-radius: 7px; 
  width: 80%;
  height: 22px;
  margin-left: -11.5%;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: yellow;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 7px;
  box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
  /* style rules */
}

<progress value="3333" max="10000">33%</progress>

Beachten Sie, dass es zwei Arten von Fortschrittsbalken gibt: unbestimmt Und bestimmen. Wenn Sie das oben Genannte verwenden, ändern Sie den Stil für beide. Wenn Sie nur den Stil für einen bestimmten Balken ändern möchten, können Sie wie folgt vorgehen. Dies ist nützlich, wenn Sie den unbestimmten Fortschrittsbalken anders gestalten möchten, beispielsweise mit einem abgerundeten Kreisel oder ähnlichem.

progress {
    display: block;
}

    /* Determinate: */

    progress[value] {
      /* style rules */
    }
    progress[value]::-webkit-progress-bar {
      /* style rules */
    }
    progress[value]::-webkit-progress-value {
      /* style rules */
    }
    progress[value]::-moz-progress-bar {
      /* style rules */
    }

    /* Indeterminate: */

    progress:not([value]) {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-bar {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-value {
      /* style rules */
    }
    progress:not([value])::-moz-progress-bar {
      /* style rules */
    }

<p>Determinate:</p>

<progress value="66" max="100">Determinate</progress>

<p>Indeterminate:</p>

<progress>Indeterminate</progress>