::-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: &nbsp;&nbsp;<meter id="styled" min="0" max="10" value="6">
  Score 6/10
</meter>

CSS

meter {
  height: 30px;
  width: 200px;
  vertical-align: -0.8rem;
}

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

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

::-webkit-meter-bar

语法

规范

示例

HTML

CSS

JavaScript

结果

浏览器兼容性

另请参阅