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 possible?
4 Answers
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.
-
11@priya if that solves your problem you should click on the checkmark on the left.– KnuFeb 18, 2011 at 6:38
-
2
-
2just a correction: you can't have them all special progress bar value setups in the same rule, because it breaks in some browsers (opera included). separate them into three different rules with the same body and it's good.– ChuckEMar 4, 2013 at 11:27
-
1also webkit needs a special set for progress bar. so add: progress::-webkit-progress-bar { background-color: red }– ChuckEMar 4, 2013 at 11:29
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 div
s 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.
<progress>
tag, there is a good blog that describe it's how to very well Here is The link this post is written a few month after this question. Enjoy!