[CSS3][HTML5] Change <METER> element (HTML5). Example with Google-Chrome Prefixes.

change_meter_element_colors.md

METER is a HTML5 element with an initial color-set.

Here are the 'defaults', which you may change.

For this HTML code:

<meter min="1" max="100" low="20" high="40" value="20"></meter>

Chrome will 'give you' something like this:

/*gray background - base                                 */  meter::-webkit-meter-bar{                  background-image: linear-gradient(rgb(221,221,221),  rgb(238,238,238) 20%,  rgb(204,204,204) 45% 55%, rgb(221,221,221));}
/*red             - even-less             (value < 'low')*/  meter::-webkit-meter-even-less-good-value{ background-image: linear-gradient(rgb(255,119,119),  rgb(255,204,204) 20%,  rgb(221,068,068) 45% 55%, rgb(255,119,119));}
/*yellow          - sub-optimum ('low' =< value < 'high')*/  meter::-webkit-meter-suboptimum-value{     background-image: linear-gradient(rgb(255,238,119),  rgb(255,255,204) 20%,  rgb(221,187,051) 45% 55%, rgb(255,238,119));}
/*green           - optimum             (value >= 'high')*/  meter::-webkit-meter-optimum-value{        background-image: linear-gradient(rgb(170,221,119),  rgb(204,238,170) 20%,  rgb(119,170,051) 45% 55%, rgb(170,221,119));}

*Note that it will actually set the 'background', but 'background-image' this is a more specific and an accurate way of setting it. You may also specify an additional 'background-color'.

Simply copy the CSS-code from above, change the colors and override the CSS-rules with your own.

Since there are just a few-states available, you may refine the CSS-rules, by providing an much more accurate set of rules, addressing the actual 'value',

for example, in the CSS-code above everything less then '20' will get that red color, but you may provide an override (with '!important') like so:

meter[value=3]::-webkit-meter-even-less-good-value{ background-image:none !important; background-color:darkred;}

you may, even, ignore the '-webkit-meter-even-less-good-value' part and just override the colors using 'value' along:

meter[value=11]{ background-image:none !important; background-color:blue;}

Enjoy!

:]