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

user_4022299 0
Viewed 84

Team,

Am using a Meter Element in HTML and wants to display only (Red and Green) Color depends on the value change. If the Value is < 20 then the Meter color will RED and if the Value > 20 then Meter color will Green. I have search lot of way but unsuccessful to do. Any idea is deeply appreciated.

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

meter html
1 Answers

Check with

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>

user_40950560
Related