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>
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>