Est-il possible de colorier la balise de progression html5?

Question

Est-il possible de colorier la balise progress en css? Je l'ai essayé. Mais seules la largeur et la hauteur fonctionnent. Je souhaite écailler la couleur de progression (couleur intérieure indiquant le pourcentage de téléchargement). Est-ce possible?

Answer 1

C'est ce que vous recherchez:

 progress {background-color:red}

progress::-webkit-progress-bar-value, progress::-webkit-progress-value,
progress::-moz-progress-bar {background-color:blue}
 

Cela fonctionne très bien sur Chrome et Firefox 6 .

Answer 2

Actuellement non. La conception / apparence de la barre de progression est actuellement définie par le navigateur et CSS ne peut pas styliser la barre de progression.

Ma solution actuelle consiste à utiliser plusieurs div s pour styler et afficher une barre de progression, à l'aide d'images sprites CSS.

Answer 3

Eh bien, je vais voir ce que je peux faire pour aider: /

J'ai examiné le style par défaut (son style css) de la balise de progression (à l'aide de l'option Inspecter l'élément de Google Chrome). Ce que j'ai trouvé est le suivant (j'espère que cela vous aidera):

 1.  -webkit-appearance: progress-bar;
2.  background-attachment: scroll;
3.  background-clip: border-box;
4.  background-color: gray;
5.  background-image: none;
6.  background-origin: padding-box;
7.  border-bottom-color: black;
8.  border-bottom-style: none;
9.  border-bottom-width: 0px;
10. border-left-width: 0px;
11. border-right-width: 0px;
12. border-top-color: black;
13. border-top-style: none;
14. border-top-width: 0px;
15. display: inline-block;
16. font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
17. font-size: 16px;
18. height: 16px;
19. line-height: 16px;
20. margin-bottom: 0px;
21. margin-left: 0px;
22. margin-right: 0px;
23. margin-top: 0px;
24. outline-color: black;
25. outline-style: none;
26. outline-width: 0px;
27. padding-bottom: 0px;
28. padding-left: 0px;
29. padding-right: 0px;
30. padding-top: 0px;
31. position: static;
32. text-align: center;
33. vertical-align: -3px;
34. width: 160px;
Styles
________________________________________

element.style {}
Matched CSS Rules
user agent stylesheet

progress {
1.  -webkit-appearance: progress-bar;
2.  display: inline-block;
3.  height: 1em;
4.  width: 10em;
5.  vertical-align: -0.2em;
6.  background-color: gray;
}

Pseudo element
user agent stylesheet

progress::-webkit-progress-bar-value {
1.  -webkit-appearance: progress-bar;
2.  background-color: green;
}
 

Answer 4

Vous ne pouvez PAS mélanger les préfixes Mozilla et WebKit dans le même sélecteur, vous devez créer des règles complètement distinctes pour les deux moteurs de rendu ...

CSS

 progress {background-color: #aaa !important;}

progress::-moz-progress-bar {background-color: #f0f !important;}

progress::-webkit-progress-value {background-color: #f0f !important;}
 

Testé sous Firefox 31 et Chrome 37. Utilisation de # f0f car il devrait être facile à repérer, sauf en cas de problèmes fondamentaux (et probablement psychologiques) avec le jeu de couleurs.