::-webkit-meter-inner-element

**非标准：**此功能是非标准的，并且不在标准轨道上。请勿在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

**::-webkit-meter-inner-element** 是一个专有的 WebKit CSS 伪元素，用于选择和应用样式到 <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 #aaa;
}

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 is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}

结果

规范

不属于任何标准。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

WebKit/Blink 用于设置 <meter> 元素其他部分样式的伪元素如下