如何仅显示红色和绿色取决于使用 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>