是否有可能为html5进度标记着色？

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?

是否有可能在CSS中为进度标记着色？我尝试过这个。但只有宽度和高度才有效。我希望皮肤颜色的进展（内部颜色，显示下载的百分比）。可能吗？

4 个解决方案

#1

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.

它在Chrome和Firefox 6上运行良好.IE10还支持:: - ms-fill伪元素。

#2

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

目前没有。进度条的设计/外观目前由浏览器定义，CSS无法设置进度条的样式。

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

我目前的解决方案是使用多个div来设置样式并使用CSS精灵图像显示进度条。

#3

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):

我查看了进度标记的默认样式（css样式）（使用Google Chrome的Inspect元素选项），我发现的是以下内容（希望这有帮助）：

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

#4

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

你不能在同一个选择器中混合使用Mozilla和WebKit前缀，你必须为两个渲染引擎创建完全独立的规则......

CSS

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.

在Firefox 31和Chrome 37中测试过。使用＃f0f因为它很容易被发现，除非颜色方案存在基本（可能是心理上的）问题。

#1