Esiste la possibilità di colorare il tag di progresso html5?

Question

C'è qualche possibilità di colorare il tag progress in css? L'ho provato. Ma solo la larghezza e l'altezza sta funzionando. Voglio colorare il colore della progressione (colore interno che mostra la percentuale di download). È possibile?

Answer 1

Attualmente no. Il design/look-and-feel della barra di avanzamento è attualmente definito dal browser e il CSS non può definire la barra di avanzamento.

La mia soluzione attuale è quella di utilizzare più div s per lo stile e mostrare una barra di avanzamento, utilizzando le immagini sprite CSS.

Answer 2

Questo è quello che stai cercando:

progress[value] {color:red} /* IE10 */ 
progress::-webkit-progress-bar-value {background:red} 
progress::-webkit-progress-value {background:red} 
progress::-moz-progress-bar {background:red} 

Si sta lavorando bene su Chrome e Firefox 6.
IE10 supporta anche lo pseudoelemento ::-ms-fill.

Answer 3

Beh Vedrò cosa posso fare per aiutare:/

ho guardato lo stile predefinito (lo stile css di esso) del tag corso (utilizzando l'opzione elemento Ispezionare di Google Chrome) e quello che ho trovato è la seguente (speriamo che questo aiuta):

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

È possibile NON mix di Mozilla e WebKit prefissi nello stesso selettore, si necessario creare regole completamente separate per entrambi i motori di rendering ...

012.

CSS

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

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

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

testato in Firefox e Chrome 31 37. Utilizzando # f0f perché dovrebbe essere facile da individuare a meno che non ci sono fondamentali (e probabilmente psicologica) problemi con la combinazione di colori.