There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.
This article needs a technical review. How you can help.
This article needs an editorial review. How you can help.
{{CSSRef}}{{Non-standard_header}}
Summary
The current value of the {{htmlelement(“:: -webkit-meter-optimum-value”)}} element is by default green when the value attribute falls inside the low-high range.
Specifications
{{WhyNoSpecStart}} Not part of any specification. This is a proprietary pseudo-element specific to WebKit/Blink.
Examples
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;
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%;
}
See also:
The pseudo-elements used by WebKit/Blink to style other parts of a <meter> element:
⦁ {{htmlelement("Webkit-meter-inner-element")}}
⦁ {{htmlelement("Webkit-meter-bar")}}
⦁ {{htmlelement("Webkit-meter-even-less-good-value")}}
⦁ {{htmlelement("Webkit-meter-suboptimum-value")}}