::-webkit-meter-bar
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
::-webkit-meter-bar CSS 伪元素是 WebKit 扩展，它代表 <meter> 元素的背景。它用于选择和应用样式到计量仪表的容器。
语法
css
::-webkit-meter-bar {
/* ... */
}
示例
HTML
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
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
js
// 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 is_safari =
navigator.userAgent.includes("AppleWebKit/") &&
!navigator.userAgent.includes("Chrome/");
if (is_safari) {
document.body.classList.add("safari");
}
结果
规范
不属于任何标准。
浏览器兼容性
加载中…
另见
-
WebKit/Blink 用于样式化
<meter>元素其他部分的伪元素如下：