Html 如何为 CSS3 html5 进度元素设置颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18368202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set color for CSS3 html5 progress element?
提问by Rolando
Is it possible to set the color of the "bar" for the element in HTML5 (when you specify a value, the bar is filled up to the point of the value)? If so, how? background-color and background don't seem to have any effect. Is the technique cross compatible with the latest version of all browsers?
是否可以为 HTML5 中的元素设置“栏”的颜色（当您指定一个值时，栏会填充到该值的位置）？如果是这样，如何？background-color 和 background 似乎没有任何效果。该技术是否与所有浏览器的最新版本交叉兼容？
采纳答案by nullability
You can style the color of the bar in the <progress>element by changing the backgroundof a few browser-proprietary selectors.
您可以<progress>通过更改background一些浏览器专有选择器的来设置元素中栏的颜色的样式。
In Firefox, you can use the following:
在 Firefox 中，您可以使用以下内容：
progress::-moz-progress-bar { background: blue; }
In Chrome or Safari, you can use:
在 Chrome 或 Safari 中，您可以使用：
progress::-webkit-progress-value { background: blue; }
In IE10, you just need to use the colorattribute:
在 IE10 中，您只需要使用该color属性：
progress { color: blue; }
回答by John
WebKit / Blink
WebKit / 闪烁
background-color
背景颜色
To color the background-colorof a progresselement (the part that does not increase/decrease) in WebKit browsers use the following:
要在 WebKit 浏览器background-color中为progress元素（不增加/减少的部分）着色，请使用以下内容：
progress::-webkit-progress-bar {background-color: #000; width: 100%;}
color
颜色
To color the effectivecolorof the movingpart of a progresselement use the following:
要为元素的移动部分的效果着色，请使用以下内容：colorprogress
progress::-webkit-progress-value {background-color: #aaa !important;}
Gecko / Firefox
壁虎/火狐
background-color
背景颜色
To color the background-colorof a progresselement (the part that does not increase/decrease) in Gecko browsers use the following:
要在 Gecko 浏览器background-color中为progress元素（不增加/减少的部分）着色，请使用以下内容：
progress {background-color: #000;}
color
颜色
To color the effectivecolorof the movingpart of a progresselement use the following:
要为元素的移动部分的效果着色，请使用以下内容：colorprogress
progress::-moz-progress-bar {background-color: #aaa !important;}
Trident / Internet Explorer (and "Edge")
Trident / Internet Explorer（和“Edge”）
When Microsoft actually makes the effort they really do actually come through, this one actually makes perfect straight-forward sense.
当微软真的做出了他们真正做到的努力时，这一点实际上是非常直接的。
background-color
背景颜色
progress {background-color: #000;}
color
颜色
progress {color: #aaa;}
回答by James Williams
Each browser seems to handle progress bar styling differently at the moment, and therefore you need to style it like this:
目前，每个浏览器似乎对进度条样式的处理方式不同，因此您需要将其样式设置为：
progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
}
progress::-moz-progress-bar {
/* style rules */
}
WebKitstyles for Chrome and Safari and mozstyles for Firefox.
WebKitChrome 和 Safari 的moz样式以及 Firefox 的样式。
From here you can simply add a background colour with background-color.
从这里您可以简单地添加背景颜色background-color。
Good Luck! Any queries, drop me a comment below.
祝你好运！有任何疑问，请在下面给我留言。
