当前位置：文江博客话题详情

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

发布于 2024-10-17 19:10:17 字数 71 浏览 4 评论 0原文

是否有可能在CSS中为进度标签着色？我试过了。但只有宽度和高度有效。我想要皮肤进度的颜色（显示下载百分比的内部颜色）。是否可以？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丘比特射中我 2024-10-24 19:10:17

这就是您正在寻找的：

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 和 < a href="https://developer.mozilla.org/en/CSS/::-moz-progress-bar" rel="nofollow noreferrer">Firefox 6。
IE10 还支持 ::-ms-fill伪元素。

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.

回复收藏 0 原文

早茶月光 2024-10-24 19:10:17

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

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

回复收藏 0 原文

灯角 2024-10-24 19:10:17

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

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

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

回复收藏 0 原文

往事风中埋 2024-10-24 19:10:17

您不能在同一个选择器中混合使用 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 因为它应该很容易被发现，除非配色方案存在根本性（可能是心理）问题。

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.

回复收藏 0 原文

~没有更多了~