您可以通过更改一些浏览器专有选择器的background来设置<progress>元素中条形图的颜色。
在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/
总之，这使得：

progress::-moz-progress-bar { background: blue; }
progress::-webkit-progress-value { background: blue; }
progress { color: blue; }

<progress value="0" max="100"></progress><br>
<progress value="25" max="100"></progress><br>
<progress value="50" max="100"></progress><br>
<progress value="75" max="100"></progress><br>
<progress value="100" max="100"></progress><br>

的字符串

Flink / Chrome

背景色

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

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

字符串

颜色

要为progress元素的移动部分的 effectivecolor着色，请使用以下命令：

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

型

Gecko / Firefox

背景色

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

progress {background-color: #000;}

型

颜色

要为progress元素的移动部分的 effectivecolor着色，请使用以下命令：

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

型

Presto / Opera

我已经非正式地放弃了对Opera的支持，因为他们已经停止开发它。对于那些感到困惑并认为Opera仍在开发中的人来说-这只是一个明显的重新命名的Chrome副本。不要测试浏览器，测试引擎！

Trident / Internet Explorer（和Edge）

当微软真正做出努力，他们真的通过，这一点实际上是完美的直接意义。

背景色

progress {background-color: #000;}

型

颜色

progress {color: #aaa;}

型

WebKit / Safari

在某个时候，WebKit/Safari停止与Chrome一起工作（反之亦然）;这是在Safari 14.0.3上测试的，截至2021-03-13。

背景色

progress[value]::-webkit-progress-bar {background-color: #000;}

型

颜色

progress[value] {-webkit-appearance: none;}
progress[value]::-webkit-progress-value {background-color: #fff;}

型
把所有这些放在一起，这使得：

/* background: */
progress::-webkit-progress-bar {background-color: black; width: 100%;}
progress {background-color: black;}

/* value: */
progress::-webkit-progress-value {background-color: green !important;}
progress::-moz-progress-bar {background-color: green !important;}
progress {color: green;}

<progress value="0" max="100"></progress><br>
<progress value="25" max="100"></progress><br>
<progress value="50" max="100"></progress><br>
<progress value="75" max="100"></progress><br>
<progress value="100" max="100"></progress><br>

progress {
  accent-color: red;
}

字符串

目前每个浏览器处理进度条样式的方式似乎都不一样，因此您需要将其样式设置为：

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添加背景颜色。
祝你好运！任何疑问，请在下面给我留言。

现代浏览器的首选方法是accent-color。
使用如下所示：

progress { accent-color: blue; }
/*or*/
#ID, .class { accent-color: blue; }

字符串
Chrome似乎已经放弃了对-webkit-progress伪选择器的支持，Firefox的实现也有缺陷，很可能也会被放弃。accent-color由Firefox、Chrome和Safari支持，并且是目前唯一有规范的方法，尽管它们还在起草中。

**注意：**Chrome（以及扩展为Edge）目前会根据重点颜色的亮度自动将背景颜色从白色切换到深灰色。

在接受的答案之上在接受的答案之上在接受的答案之上

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

字符串
看到这个答案了吗

progress：：-moz-progress-bar {background-color：#C8DED8;}
progress：：-webkit-progress-bar {background-color：#C8DED8;}
progress：：-webkit-progress-value {background-color：#E7B92A;}
progress {border-radius：8 px;溢出：隐藏;高度：6px;}

截至2023年8月，这是我在Chrome、Firefox和Safari中发现的对进度条重新着色的最简单方法。accent-color似乎不起作用。但是你可以在progress元素上设置color，然后在你需要的各种伪类中引用它，所以如果你想要多个颜色的进度条，你只需要改变一个属性。

progress {
    color: darkmagenta;

    /* Firefox: Unfilled portion of the progress bar */
    background: lightgrey;
}

/* Firefox: Filled portion of the progress bar */
progress::-moz-progress-bar {
    background: currentColor;
}

/* Chrome & Safari: Unfilled portion of the progress bar */
progress::-webkit-progress-bar {
    background: lightgrey;
}

/* Chrome & Safari: Filled portion of the progress bar */
progress::-webkit-progress-value {
    background: currentColor;
}

/* Easily change the color */
progress.red {
    color: darkred;
}
progress.blue {
    color: darkblue;
}

个字符
你可以对上面的每个选择器应用更多的规则，比如border和border-radius，来进一步设计你的进度条，就像这样：

progress {
    color: darkmagenta;
    height: 9px;
    width: 100%;
    border-radius: 10px;

    /* Firefox: Unfilled portion of the progress bar */
    background: white;
    border: 1px solid currentColor;
}

/* Firefox: Filled portion of the progress bar */
progress::-moz-progress-bar {
    background: currentColor;
    border-radius: 10px;
}

/* Chrome & Safari: Unfilled portion of the progress bar */
progress::-webkit-progress-bar {
    background: white;
    border-radius: 10px;
}

/* Chrome & Safari: Filled portion of the progress bar */
progress::-webkit-progress-value {
    background: currentColor;
    border-radius: 10px;
}

/* Easily change the color */
progress.red {
    color: darkred;
}
progress.blue {
    color: darkblue;
}

<progress value=".25">25%</progress> <br/>
<progress value=".33" class="red">33%</progress> <br/>
<progress value=".5" class="blue">50%</progress>

的字符串