demo · v130

<meter> with author styles

Drag the value slider. Compare the UA meter (left) against an authored one (right) using appearance: none and the per-engine pseudo-elements. Before v130, appearance: none made <meter> vanish in Chrome — now it falls back to a reasonable rendering you can style.

0.65
0.3
0.7
1.0

UA meter

authored meter (appearance: none)

the code

meter {
  appearance: none;
  border: 2px solid black;
  background: white;
  box-shadow: 2px 2px 0 black;
}
meter::-webkit-meter-optimum-value     { background: green; }
meter::-webkit-meter-suboptimum-value  { background: gold; }
meter::-webkit-meter-even-less-good-value { background: red; }
meter::-moz-meter-bar                  { background: green; }

see also