::-webkit-meter-inner-element
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
::-webkit-meter-inner-element 是一个 WebKit 专有的 CSS 伪元素，用于选择和应用样式到 <meter> 元素的外部容器元素。额外标记可将 meter 元素渲染为只读。
语法
css
::-webkit-meter-inner-element {
/* ... */
}
示例
这仅适用于基于 WebKit 和 Blink 的浏览器，例如 Safari、Chrome 以及基于 Chromium 的 Edge 版本。
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
body {
font-family: monospace;
}
.safari meter {
/* Reset the default appearance for Safari only */
/* .safari class is added via JavaScript */
-webkit-appearance: none;
}
#styled::-webkit-meter-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
border: 1px dashed #aaaaaa;
}
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> 元素其他部分的伪元素如下：