Maison > Article > interface Web > Comment changer la couleur de la barre de progression dans la balise de progression HTML5 ? Explication détaillée de la barre de progression

Comment changer la couleur de la barre de progression dans la balise de progression HTML5 ? Explication détaillée de la barre de progression

寻∝梦original: 2018-09-04 10:39:3816287parcourir

Cet article présente l'analyse de style de la nouvelle balise de barre de progression en html5 et explique comment changer la couleur de la barre de progression via la balise de progression html5. Ensuite, lisons cet article ensemble

Tout d’abord, découvrons l’introduction de la balise de progression html5 :

Le progrès est un nouvel élément du HTML5. Indique la définition d'une barre de progression, qui a un large éventail d'utilisations. Elle peut être utilisée pour afficher la progression des téléchargements de fichiers, la progression des téléchargements de fichiers, et peut également être utilisée comme barre d'état de chargement pour le chargement.

Astuce : veuillez utiliser la balise avec javaScript pour afficher la progression de la tâche.

Remarque : La balise ne convient pas pour représenter des métriques (par exemple, l'utilisation de l'espace disque ou les résultats d'une requête). Pour représenter les poids et les mesures, utilisez plutôt la balise .

Syntaxe de la barre de progression html5 :

<progress value=&#39;70&#39; max=&#39;100&#39;></progress>

Préparons un exemple de balise de progression html5 :

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

Expliquez, dans le navigateur Chrome, la progression est rendue avec la structure suivante

progress

:-webkit-progress-bar Tous les progrès

:-webkit-progress -value Completed progress

Stylisez-le avec ces deux pseudo-éléments.

Mais c'est différent dans d'autres navigateurs, comme IE10. Ces deux pseudo-éléments ne fonctionnent pas. Vous pouvez directement utiliser le style de couleur pour modifier la couleur de la progression terminée, et toute la progression est en arrière-plan<.>

Dans FireFox, la barre de progression représente la progression terminée et l'arrière-plan représente la progression entière. Cependant, dans Opera, ce style ne peut être que le style par défaut du navigateur.

Par conséquent, la méthode d'écriture de compatibilité peut être considérée comme suit :

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

Ce qui précède est le code sur le style CSS de couleur de la barre de progression, et le L'effet d'affichage est le suivant :

Comment changer la couleur de la barre de progression dans la balise de progression HTML5 ? Explication détaillée de la barre de progression

D'accord, ce qui précède est un article sur la façon d'utiliser la nouvelle balise de progression en HTML5 et de changer la couleur. Si vous avez des questions, vous pouvez le faire. peut demander ci-dessous.

[Recommandation de la rédaction]

Comment utiliser la balise d'en-tête html5 ? Introduction au rôle des balises d'en-tête html5

Qu'est-ce que la balise include en html ? html include implémente l'analyse de la configuration

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html5 css chrome html webkit include 伪元素 background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu'est-ce que la balise include en HTML ? html include implémente l'analyse de la configurationArticle suivant：Qu'est-ce que la balise include en HTML ? html include implémente l'analyse de la configuration

Articles Liés

Voir plus