为何HTML progress元素内联样式不生效？渐变样式无法应用

嘿，我知道你现在卡在progress进度条的渐变样式上了——直接给color属性设渐变肯定没用，这个标签的样式规则有点特殊，我来给你拆解一下问题，再给你靠谱的解决方案。

问题出在哪？ #

你原来的代码里，给progress标签的style.color赋值了线性渐变，但progress的color属性根本不是用来控制进度条填充背景的！这个属性主要管的是标签内的文本颜色（大部分情况下progress标签里没文本），而且progress是个特殊的表单元素，不同浏览器有自己的默认渲染逻辑，必须通过特定的伪元素才能定制它的填充样式，内联样式根本碰不到这些伪元素。

正确的实现方法 #

因为React的内联样式不支持伪元素，所以我们得用CSS类来定义样式，然后在React组件里引用这个类。下面是具体步骤：

1. 先写好CSS样式

针对不同浏览器的伪元素设置渐变，这样兼容性更好：

/* 重置progress的默认外观 */
.custom-progress {
  -webkit-appearance: none;
  appearance: none;
  height: 12px; /* 可以自己调整高度 */
  border-radius: 6px; /* 圆角效果，可选 */
  background-color: #fff; /* 进度条未填充部分的背景色 */
}

/* 针对WebKit内核浏览器（Chrome、Safari、Edge等） */
.custom-progress::-webkit-progress-value {
  border-radius: 6px;
  background: linear-gradient(to right, #cf014d, #fff); /* 你的渐变规则 */
}

.custom-progress::-webkit-progress-bar {
  border-radius: 6px;
  background-color: #fff; /* 和上面的背景色保持一致 */
}

/* 针对Firefox浏览器 */
.custom-progress::-moz-progress-bar {
  border-radius: 6px;
  background: linear-gradient(to right, #cf014d, #fff);
}

2. 修改你的React代码

把原来的style属性换成className，引用我们定义好的CSS类：

var customColor = '#cf014d';
ReactDOM.render(
  React.createElement("progress", { 
    max: "100", 
    value: "80", 
    className: "custom-progress" 
  }), 
  document.getElementById('root')
);

完整的可运行代码示例

把CSS、React和HTML整合到一起，直接就能跑：

<!DOCTYPE html>
<html>
<head>
  <style>
    .custom-progress {
      -webkit-appearance: none;
      appearance: none;
      height: 12px;
      border-radius: 6px;
      background-color: #fff;
    }

    .custom-progress::-webkit-progress-value {
      border-radius: 6px;
      background: linear-gradient(to right, #cf014d, #fff);
    }

    .custom-progress::-webkit-progress-bar {
      border-radius: 6px;
      background-color: #fff;
    }

    .custom-progress::-moz-progress-bar {
      border-radius: 6px;
      background: linear-gradient(to right, #cf014d, #fff);
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script src="//unpkg.com/react/umd/react.development.js"></script>
  <script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script>
    var customColor = '#cf014d';
    ReactDOM.render(
      React.createElement("progress", { 
        max: "100", 
        value: "80", 
        className: "custom-progress" 
      }), 
      document.getElementById('root')
    );
  </script>
</body>
</html>

这样一来，你的线性渐变就能正常显示在进度条上了，而且主流浏览器都能兼容～

内容的提问来源于stack exchange，提问作者jose1221