Heim >Web-Frontend >HTML-Tutorial >Wie ändere ich die Farbe des Fortschrittsbalkens im HTML5-Fortschrittstag? Detaillierte Erläuterung des Fortschrittsbalkens
In diesem Artikel wird die Stilanalyse des neuen Fortschrittsbalken-Tags in HTML5 vorgestellt und erläutert, wie die Farbe des Fortschrittsbalkens über das HTML5-Fortschritts-Tag geändert wird. Lassen Sie uns als nächstes gemeinsam diesen Artikel lesen
Lassen Sie uns zunächst die Einführung des HTML5-Fortschritts-Tags kennenlernen:
Fortschritt ist ein neues Element von HTML5. Gibt die Definition eines Fortschrittsbalkens an, der vielfältig einsetzbar ist. Er kann zur Anzeige des Fortschritts beim Hochladen von Dateien und beim Herunterladen von Dateien verwendet werden und kann auch als Ladestatusbalken zum Laden verwendet werden.
Tipp: Bitte verwenden Sie das Tag
Hinweis: Das Tag
Syntax des HTML5-Fortschrittsbalkens:
<progress value='70' max='100'></progress>
Bereiten wir ein Beispiel für ein HTML5-Fortschritts-Tag vor:
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
progress{
width: 168px;
height: 5px;
}
progress::-webkit-progress-bar
{
background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>Erklären Sie es. Im Chrome-Browser wird der Fortschritt mit der folgenden Struktur gerendert:
progress
:-webkit-progress-bar All progress
:-webkit-progress-value Completed Progress
Stylen Sie es mit diesen beiden Pseudoelementen.
In anderen Browsern wie IE10 ist das jedoch anders. Diese beiden Pseudoelemente funktionieren nicht. Sie können den Farbstil direkt verwenden, um die Farbe des abgeschlossenen Fortschritts zu ändern, und der gesamte Fortschritt ist im Hintergrund 🎜>
In Firefox stellt der Fortschrittsbalken den abgeschlossenen Fortschritt dar und der Hintergrund stellt den gesamten Fortschritt dar. In Opera kann dieser Stil jedoch nur der Standardstil des Browsers sein.Daher kann die Kompatibilitätsschreibmethode wie folgt betrachtet werden:
progress
{
color:orange; /*兼容IE10的已完成进度背景*/
border:none;
background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/
}
progress::-webkit-progress-bar
{
background:#d7d7d7;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
background:orange;
}Das Obige ist der Code für den Farb-CSS-Stil des Fortschrittsbalkens wie folgt:
Wie verwende ich den HTML5-Header-Tag? Einführung in die Rolle von HTML5-Header-Tags
Was ist das Include-Tag in HTML? html include implementiert die Konfigurationsanalyse
Das obige ist der detaillierte Inhalt vonWie ändere ich die Farbe des Fortschrittsbalkens im HTML5-Fortschrittstag? Detaillierte Erläuterung des Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!