::-webkit-meter-bar CSS pseudo-element
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Das ::-webkit-meter-bar CSS Pseudoelement ist eine WebKit-Erweiterung, die den Hintergrund eines <meter>-Elements darstellt. Es wird verwendet, um Stile auf den Behälter einer Anzeige für einen Messwert anzuwenden.
Syntax
::-webkit-meter-bar {
/* ... */
}
Beispiele
HTML
Normal: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Styled: <meter id="styled" min="0" max="10" value="6">
Score 6/10
</meter>
CSS
.safari meter {
/* Reset the default appearance for Safari only */
/* .safari class is added via JavaScript */
-webkit-appearance: none;
}
#styled::-webkit-meter-bar {
background: lime;
box-shadow: 0 10px 20px grey inset;
border-radius: 10px;
}
JavaScript
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.
const isSafari =
navigator.userAgent.includes("AppleWebKit/") &&
!navigator.userAgent.includes("Chrome/");
if (isSafari) {
document.body.classList.add("safari");
}
Ergebnis
Spezifikationen
Teil keines Standards.
Browser-Kompatibilität
Siehe auch
-
Die von WebKit/Blink verwendeten Pseudoelemente zur Gestaltung anderer Teile eines
<meter>-Elements sind wie folgt: