css - only - ¿Hay alguna posibilidad de colorear la etiqueta de progreso html5?

progress bar html5 javascript

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 usar múltiples div para diseñar y mostrar una barra de progreso, usando imágenes de sprites CSS.

Answer 2

Bien, veré qué puedo hacer para ayudar: /

He visto el estilo predeterminado (el estilo css) de la etiqueta de progreso (usando la opción de elemento Inspeccionar de Google Chrome) y lo que encontré es lo siguiente (espero que esto ayude):

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 3

Esto es lo que estás buscando:

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

Funciona bien en Chrome y Firefox 6 .
IE10 también admite el pseudo-elemento ::-ms-fill .

Answer 4

NO puede mezclar prefijos Mozilla y WebKit en el mismo selector, debe crear reglas completamente independientes 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 31 y Chrome 37. Usar #f0f porque debería ser fácil de detectar a menos que haya problemas fundamentales (y probablemente psicológicos) con el esquema de color.