Is there any possibility to color the html5 progress tag?

Is there any possibility to color the progress tag in css? I tried it. But only width and height is working. I want to skin the color of progression (inner color which shows the percentage of download). Is it possib开发者_运维百科le?

This is what you are looking for:

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

It's working just fine on Chrome and Firefox 6.
IE10 also supports the ::-ms-fill pseudo-element.

Currently no. The design/look-and-feel of the progress bar is currently defined by the browser and CSS cannot style the progress bar.

My current solution to this is to use multiple divs to style and show a progress bar, using CSS sprite images.

Well I'll see what I can do to help :/

I have looked at the default style (the css style of it) of the progress tag (using Google Chrome's Inspect element option) and what I found is the following (hope this helps):

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

You can NOT mix Mozilla and WebKit prefixes in the same selector, you must create completely separate rules for both rendering engines...

CSS

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

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

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

Tested in Firefox 31 and Chrome 37. Using #f0f because it should be easy to spot unless there are fundamental (and probably psychological) issues with the color scheme.