¿Hay alguna posibilidad de colorear la etiqueta de progreso html5?

Question

¿Hay alguna posibilidad de colorear la etiqueta de progreso en css? Lo intenté. Pero solo el ancho y la altura funcionan. Quiero pelar el color de la progresión (color interno que muestra el porcentaje de descarga). ¿Es posible?

Answer 1

Actualmente no. El diseño/apariencia de la barra de progreso está definido actualmente por el navegador y CSS no puede modificar el estilo de la barra de progreso.

Mi solución actual a esto es utilizar múltiples div s de estilo y mostrar una barra de progreso, el uso de imágenes de sprites CSS.

Answer 2

Esto es lo que busca:

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

Está funcionando muy bien en Chrome y Firefox 6.
IE10 también admite el pseudo-elemento ::-ms-fill.

Answer 3

Bueno voy a ver qué puedo hacer para ayudar:/

He mirado el estilo por defecto (el estilo CSS de la misma) de la etiqueta de progreso y lo que (opción Inspeccionar el elemento de Google Chrome usando) encontrado es la siguiente (espero que esta ayuda):

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

puede NO mezcla de Mozilla y WebKit prefijos en el mismo selector, debe crear reglas completamente separados para ambos motores de renderizado ...

CSS

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

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

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

Probado en Firefox y Chrome 31 37. El uso de # F0F porque debe ser fácil de detectar a menos que haya fundamental (y probablemente psicológico) problemas con la combinación de colores.