1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. セレクター
  5. ::-moz-meter-bar

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS ::-moz-meter-bar 擬似要素

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

::-moz-meter-bar は CSS の擬似要素で、<meter> 要素内のメーターゲージを表します。これは、メーター要素内のゲージを選択し、スタイルを適用するために使用されます。

メモ: デフォルトで、<meter> 要素にはネイティブのスタイルが適用されます。独自のスタイルを適用するには、まず <meter> 要素に appearance: none を設定し、その後 ::-moz-meter-bar を使用してスタイルを設定してください。

構文

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

例

HTML

html
通常のバー: &nbsp;&nbsp;&nbsp;<meter min="0" max="10" value="6">
  スコア 6/10
</meter>
<br />
スタイル設定:
<meter class="styled" min="0" max="10" value="6">スコア 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;
}

結果

仕様書

どの標準にも含まれていません。

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告