This page was translated from English by the community. Learn more and join the MDN Web Docs community.

::-webkit-progress-value

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

::-webkit-progress-value CSS 疑似要素は、 <progress> 要素のバーの塗りつぶされた部分を表します。これは、 ::-webkit-progress-bar (en-US) 疑似要素の子要素です。

Note: ::-webkit-progress-value を有効にするには -webkit-appearance (en-US) を <progress> 要素で none に設定する必要があります。

仕様

仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。

例

HTML

<progress value="10" max="50">

CSS

progress {
  -webkit-appearance: none;
}

::-webkit-progress-value {
  background-color: orange;
}

Result

上記のスタイルを使用したプログレスバーは次のようになります:

ブラウザーの実装状況

BCD tables only load in the browser

関連項目

WebKit/Blink が <progress> 要素のその他の部分をスタイルするために使用する疑似要素:
- ::-webkit-progress-bar (en-US)
- ::-webkit-progress-inner-element (en-US)
::-moz-progress-bar
::-ms-fill