Web/CSS/ -webkit-meter-optimum-value

From Get docs

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


The ::-webkit-meter-optimum-value CSS pseudo-element styles the <meter> element when its value is inside the low-high range.

Green is the default color.

Syntax

::-webkit-meter-optimum-value

Specifications

Not part of any standard.

Examples

This example will only work in browsers based on WebKit or Blink.

HTML

<meter min="0" max="10" value="6">Score out of 10</meter>

CSS

meter::-webkit-meter-bar {
  /* Required to get rid of the default background property */
  background : none;
  background-color : whiteSmoke;
  box-shadow : 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
}

Result

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

::-webkit-meter-optimum-value

Non-standard'

Chrome

Full support 12

Edge

Full support 79

Firefox

No support No

IE

No support No

Opera

Full support 15

Safari

Full support 5.1

WebView Android

Full support ≤37

Chrome Android

Full support 18

Firefox Android

No support No

Opera Android

Full support 14

Safari iOS

Full support 5

Samsung Internet Android

Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.'
Non-standard. Expect poor cross-browser support.


See also

The pseudo-elements used by WebKit/Blink to style other parts of a <meter> element are as follows: