::-moz-progress-bar

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

::-moz-progress-barCSS擬似要素Mozilla 拡張であり、 <progress> 要素の中のプログレスバーを表します。 (バーは進捗した量を表します。)

<progress> のまだ終了していない部分を Mozilla で選択したい場合は、 <progress> で直接選択してください。

構文

::-moz-progress-bar

HTML

<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>

CSS

::-moz-progress-bar {
  background-color: red;
}

/* 不確実なバーは強制的に幅をゼロにする */
:indeterminate::-moz-progress-bar {
  width: 0;
}

結果

上記の最初のバーは次のようになります。

Custom styled progress bar

関連情報