html - 如何仅显示红色和绿色取决于使用 HTML Meter 元素的低设置点

Question

团队，

我在 HTML 中使用 Meter 元素并且只想显示（红色和绿色）颜色取决于值的变化。如果值 < 20，则仪表颜色将为红色，如果值 > 20，则仪表颜色将为绿色。我搜索了很多方法，但没有成功。任何想法都深表感谢。

<meter min="0" low="20" max="100" value="65"></meter> 

Answer 1

检查与

meter::-webkit-meter-optimum-value {
  background: green;
}

meter::-webkit-meter-suboptimum-value {
  background: green;
}

meter::-webkit-meter-even-less-good-value  {
  background: red;
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background: green;
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: green;
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: red;
}

<meter min="0" max="100" low="20" high="75" optimum="100" value="19"></meter>
<meter min="0" max="100" low="20" high="75" optimum="100" value="25"></meter>