progress标签默认样式无法通过常规CSS修改，因其渲染依赖平台原生控件；需用伪元素如::-webkit-progress-bar和::-moz-progress-bar跨浏览器定制外观，或改用div+ARIA方案确保一致性。
progress标签默认样式为什么改不了
直接写 <progress value="30" max="100"></progress>，发现加 color、font-size 或常规 border 都没反应——因为浏览器对 <progress></progress> 的渲染完全走的是平台原生控件逻辑，CSS 作用域被严格隔离。不是你写错了，是它天生不响应大多数通用属性。
用伪元素修改 Chrome / Edge / Safari 进度条外观
主流 Blink/WebKit 内核浏览器（Chrome、Edge、Safari）支持通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 控制轨道与填充部分。注意：Firefox 不支持这套，需单独处理。
常见实操建议：
-
::-webkit-progress-bar只能设背景、圆角、边框，不能设宽高或 margin -
::-webkit-progress-value的background会覆盖默认色，但transform、animation无效 - 想让进度条变细？只能靠
height控制整体高度，再用border-radius配合overflow: hidden模拟
progress {
height: 6px;
border-radius: 3px;
overflow: hidden;
background: #e0e0e0;
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
background: #4a90e2;
border-radius: 3px;
}
Firefox 中 progress 样式怎么生效
Firefox 使用 ::progress-bar 和 ::progress-value（无前缀），但支持度有限：仅接受 background、border、border-radius，且 ::progress-value 无法独立设宽高。
立即学习“前端免费学习笔记（深入）”；
兼容写法要点：
- 必须把 Firefox 规则写在 WebKit 规则之后，否则会被覆盖（CSS 层叠顺序敏感）
- 不要依赖
linear-gradient做渐变填充——Firefox 旧版本会回退为纯色 - 若需统一动效，建议放弃原生
<progress></progress>，改用<div> + JS 控制宽度 <pre class='brush:php;toolbar:false;'>progress::-moz-progress-bar { background: #4a90e2; border-radius: 3px; }</pre> <h3>真正跨浏览器稳定的替代方案</h3> <p>当设计要求精确控制颜色过渡、动画节奏、响应式缩放，或需支持 IE（哪怕只是降级显示），原生 <code><progress></progress>就成了障碍。此时最省心的做法是弃用它，用语义化容器模拟：- 用
<div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> 保持可访问性 <li>内部嵌套 <code><div class="progress-fill">，通过 <code>width或transform: scaleX()控制填充比例 - 所有样式、动画、主题切换都由 CSS 类控制，无浏览器差异
复杂点在于需要手动同步
aria-valuenow，但换来的是确定性——这点在组件库或设计系统里几乎总是值得的。 - 用
