Question

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

Answer 1

这就是你要找的东西：

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

它在Chrome和Firefox 6上工作得很好 IE10还支持::-ms-fill伪元素。

Answer 2

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

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

Answer 3

好吧，我会看到我能做些什么来帮助：/

我查看了进度标记的默认样式（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;
}

Answer 4

您可以不在同一个选择器中混合使用Mozilla和WebKit前缀，必须为两个呈现引擎创建完全独立的规则......

<强> CSS

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

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

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

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

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

4 个答案: