css进度条想自定义填充颜色怎么做_使用::progress-value伪元素修改样式-css教程-PHP中文网

css进度条想自定义填充颜色怎么做_使用::progress-value伪元素修改样式

P粉602998670

发布： 2025-12-23 20:18:08

原创

391人浏览过

原生progress元素的填充色需用内核专属伪元素设置：WebKit用::-webkit-progress-value配合::-webkit-progress-bar，Firefox用::-moz-progress-bar；IE不支持，需JS模拟。

css进度条想自定义填充颜色怎么做_使用::progress-value伪元素修改样式

原生 `` 元素的填充颜色不能直接用 `background-color` 修改，因为填充部分是浏览器内置的伪元素控制的。CSS 中没有标准的 `::progress-value` 伪元素——这是个常见误解。实际可用的是 `::-webkit-progress-value`（Chrome/Safari/Edge）和 `::-moz-progress-bar`（Firefox），不同内核需分别处理。

WebKit 内核（Chrome、Edge、Safari）

使用 `::-webkit-progress-value` 选择器设置填充条样式，必须配合 `::-webkit-progress-bar` 设置背景（否则填充可能溢出或不可见）：

给整个进度条容器设底色：progress::-webkit-progress-bar { background-color: #f0f0f0; }
给已填充部分设颜色：progress::-webkit-progress-value { background-color: #4CAF50; }
可加圆角、过渡等效果，例如：transition: width 0.3s ease;（注意：width 不生效，应改用 transform 或 opacity 动画）

Firefox（Gecko 内核）

Firefox 使用 `::-moz-progress-bar`，它直接代表填充区域，无需额外设置 bar 容器：

progress::-moz-progress-bar { background-color: #2196F3; }
不支持 `border-radius` 或 `box-shadow` 等部分装饰属性（旧版限制，新版 Firefox 已逐步支持）

兼容写法示例

一个实用的跨浏览器自定义进度条 CSS：

超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

123

查看详情

立即学习“前端免费学习笔记（深入）”；

progress {
  height: 8px;
  border: none;
  border-radius: 4px;
  background-color: #e0e0e0;
  -webkit-appearance: none;
}
progress::-webkit-progress-bar {
  background-color: #e0e0e0;
  border-radius: 4px;
}
progress::-webkit-progress-value {
  background-color: #FF5722;
  border-radius: 4px;
  transition: background-color 0.2s;
}
progress::-moz-progress-bar {
  background-color: #FF5722;
  border-radius: 4px;
}

登录后复制