demo · v130

branded meter themes

The chromestatus motivation: developers can now "custom style the meter parts" without the element disappearing under appearance: none. Four real-world themes built entirely from the standard ::-webkit-meter-* pseudo-elements — drag the slider to see them all move together with the right colour-by-value bands.

0.58
0.20 0.75

battery

charge58%

audio peak

dB-12 dB

water tank

level580 L

storage

used58 / 100 GB

the code

/* The battery theme above, distilled:                */
meter.battery {
  appearance: none;                /* needed in Chrome 130+ to opt out
                                      of the UA renderer */
  height: 1.6rem;
  border: 2.5px solid #000;
  border-radius: 4px;
  background: #fff;
  position: relative;
  box-shadow: 2px 2px 0 #000;
}
meter.battery::after {             /* the little terminal nub */
  content: "";
  position: absolute;
  right: -7px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 0.7rem;
  background: #000;
}
/* Per-engine fill colour bands. WebKit/Blink uses three pseudos for
   the three states (above optimum, within range, below); Firefox uses
   one pseudo and reads min/low/high/optimum to colour itself. */
meter.battery::-webkit-meter-optimum-value        { background: #0a8f5c; }
meter.battery::-webkit-meter-suboptimum-value     { background: #b87b00; }
meter.battery::-webkit-meter-even-less-good-value { background: #d11a2a; }
meter.battery::-moz-meter-bar                     { background: #0a8f5c; }

see also