css进度条怎么自定义填充颜色？用::progress-value伪元素修改样式的方法

在网页开发里，原生的progress元素默认的填充颜色通常比较单一，很难匹配不同项目的设计风格，想要调整填充颜色不需要额外添加冗余的HTML结构，直接使用CSS的::progress-value伪元素就能实现自定义效果。

::progress-value伪元素的基本介绍

::progress-value是CSS中专门用于选中progress元素填充区域的伪元素，它只对具有value属性的progress元素生效，能够直接修改填充部分的背景色、渐变等样式，不需要通过额外的div嵌套来模拟进度条。

基础使用示例

首先创建一个基础的progress元素，设置好最大值和当前值：

<progress value="30" max="100"></progress>

接下来通过CSS选中::progress-value伪元素，修改填充颜色为蓝色：

/* 选中progress元素的填充区域 */
progress::progress-value {
    background-color: #2196f3;
}

进阶自定义样式

除了单一的纯色填充，还可以使用渐变、圆角等效果，让进度条更符合设计需求。

渐变填充示例

如果需要填充区域是渐变效果，可以在background属性中设置线性渐变：

progress::progress-value {
    /* 从左到右的蓝色到青色渐变 */
    background: linear-gradient(to right, #2196f3, #00bcd4);
    /* 设置圆角让填充区域边角更柔和 */
    border-radius: 4px;
}

结合原生进度条其他伪元素

progress元素还有::progress-bar伪元素用于选中整个进度条的背景区域，配合::progress-value可以实现更完整的样式自定义：

/* 进度条整体背景 */
progress::progress-bar {
    background-color: #f0f0f0;
    border-radius: 4px;
    height: 8px;
}

/* 进度条填充区域 */
progress::progress-value {
    background-color: #4caf50;
    border-radius: 4px;
}

浏览器兼容性说明

::progress-value伪元素的兼容性存在一定差异，Chrome、Edge等基于Chromium的浏览器支持较好，Firefox需要使用::-moz-progress-bar伪元素来替代，Safari的支持情况需要根据版本确认。如果需要兼容多浏览器，可以添加对应的前缀写法：

/* Chrome、Edge等浏览器 */
progress::progress-value {
    background-color: #ff9800;
}

/* Firefox浏览器 */
progress::-moz-progress-bar {
    background-color: #ff9800;
}

注意事项

• progress元素必须设置value属性，否则::progress-value伪元素不会生效，因为无法确定填充区域的范围。
• 如果progress元素设置了appearance: none;属性，部分浏览器的伪元素可能会失效，需要根据实际测试调整样式写法。
• 伪元素的样式优先级高于progress元素的常规样式，不需要额外添加!important就能覆盖默认填充颜色。

cssprogress_bar::progress-value自定义样式修改时间：2026-06-18 21:36:13