Comment changer la couleur de la barre de progression dans la balise de progression HTML5 ? Explication détaillée de la barre de progression-tutoriel HTML-php.cn

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

寻∝梦

Libérer： 2018-09-04 10:39:38

original

16365 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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