Question

是否可以在HTML5中为元素设置“bar”的颜色（当指定值时，条形填充到值的位置）？如果是这样，怎么样？背景颜色和背景似乎没有任何影响。该技术是否与所有浏览器的最新版本交叉兼容？

Answer 1

您可以通过更改一些浏览器专有选择器的<progress>来设置background元素中条形图的颜色。

在Firefox中，您可以使用以下内容：

progress::-moz-progress-bar { background: blue; }

在Chrome或Safari中，您可以使用：

progress::-webkit-progress-value { background: blue; }

在IE10中，您只需使用color属性：

progress { color: blue; }

来源：http://html5doctor.com/the-progress-element/

Answer 2

WebKit / Blink

<强>背景颜色

要在WebKit浏览器中为background-color元素的progress（不增加/减少的部分）着色，请使用以下内容：

progress::-webkit-progress-bar {background-color: #000; width: 100%;}

<强>颜色

要为color元素的移动部分的有效 progress着色，请使用以下内容：

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

Gecko / Firefox

<强>背景颜色

要在Gecko浏览器中为background-color元素的progress（不增加/减少的部分）着色，请使用以下内容：

progress {background-color: #000;}

<强>颜色

要为color元素的移动部分的有效 progress着色，请使用以下内容：

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

Trident / Internet Explorer（以及＆＃34; Edge＆＃34;）

当微软真正付出努力时，他们确实真正实现了这一目标，这一点实际上是完全直截了当的。

<强>背景颜色

progress {background-color: #000;}

<强>颜色

progress {color: #aaa;}

Answer 3

目前，每个浏览器似乎都以不同的方式处理进度条样式，因此您需要像这样设置样式：

progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
} 
progress::-moz-progress-bar {
/* style rules */
}

适用于Chrome和Safari的

WebKit个样式以及适用于Firefox的moz样式。

从这里，您可以使用background-color添加背景颜色。

祝你好运！有任何疑问，请在下面发表评论。

Answer 4

在接受的答案之上，您可能想要添加

/* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

看到这个answer

如何设置CSS3 html5进度元素的颜色？

4 个答案: