How to change background color in HTML meter?
Is there a way to change the background color of the HTML meter?
I know its default background color is green.
Is it possible to change its background color from green to any other color?
I tried the style attribute but it still stays green.
<meter style="background-color:red;"min="0" low="40" high="95" max="100" value="65">
</meter>
+3
source to share
5 answers
meter::-webkit-meter-optimum-value {
background: red; /* Green */
}
<meter min="0" low="40" high="95" max="100" value="65" col>
</meter>
+7
source to share
meter::-webkit-meter-optimum-value {
background: red;
}
meter::-moz-meter-bar { /* Firefox Pseudo Class */
background: red;
}
<meter min="0" low="40" high="95" max="100" value="65">
</meter>
+3
source to share
for chrome:
/*meter */
meter::-webkit-meter-bar {background: #e6e6e9;} /*background color of bar*/
meter::-webkit-meter-optimum-value {background: green;}
meter::-webkit-meter-suboptimum-value{background:orange;}
meter::-webkit-meter-even-less-good-value{background:red;}
for firefox:
/*meter */
/*bar with only one possible color*/
meter::-moz-meter-bar {background: red;} /* color of bar*/
/* bar with different colors*/
/* between "low" and "high" thresholds*/
meter::-moz-meter-optimum-value {background: lightgreen;}
/*below "low" threshold or above "high" threshold*/
meter::-moz-meter-suboptimum-value{background:gold;}
+3
source to share
You need to choose the counter value and, accordingly, the style, and for more inputs refer to this link.
meter::-webkit-meter-optimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient(
90deg,
#8bcf69 5%,
#e6d450 5%,
#e6d450 15%,
#f28f68 15%,
#f28f68 55%,
#cf82bf 55%,
#cf82bf 95%,
#719fd1 95%,
#719fd1 100%
);
background-size: 100% 100%;
}
<meter value="0.6"></meter>
+1
source to share
<meter min="0" low="40" high="95" max="100" value="65" col>
</meter>
meter::-webkit-meter-optimum-value {
background: red; /* Green */
}
+1
user5152314
source
to share