::-moz-meter-bar

非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。

::-moz-meter-bar CSS 偽元素表示 <meter> 元素中的計量條。它用於選擇和對計量元素內部的計量條應用樣式。

注意:預設情況下,<meter> 元素使用原生樣式。要應用您自己的樣式,首先在 <meter> 元素上設定 appearance: none,然後使用 ::-moz-meter-bar 進行樣式設定。

語法

css
meter {
  appearance: none;
}
::-moz-meter-bar {
  /* ... */
}

示例

HTML

html
Normal: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Styled: &nbsp;&nbsp;<meter class="styled" min="0" max="10" value="6">
  Score 6/10
</meter>

CSS

css
meter {
  height: 20px;
  width: 200px;
  vertical-align: -0.4rem;
}

.styled {
  appearance: none;
}

.styled::-moz-meter-bar {
  background: lime;
  box-shadow: 0 2px 3px grey inset;
  border-radius: 5px;
}

結果

規範

不屬於任何標準。

瀏覽器相容性

另見