如何仅显示红色和绿色取决于使用 HTML 仪表元件的低设置点

Question

团队，

我在 HTML 中使用 Meter Element 并且只想显示（红色和绿色）颜色取决于值的变化。如果值 < 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>

如何仅显示红色和绿色取决于使用 HTML 仪表元件的低设置点

How to display only RED and Green color depends on low set point using a HTML Meter element

html

meter