::-webkit-progress-value

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

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

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

仕様

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

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

progress {
  -webkit-appearance: none;
}

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

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

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`::-webkit-progress-value` 非標準	Chrome 完全対応 25	Edge 完全対応 79	Firefox 未対応なし	IE 未対応なし	Opera 完全対応 15	Safari 完全対応 6.1	WebView Android 完全対応 ≤37	Chrome Android 完全対応 25	Firefox Android 未対応なし	Opera Android 完全対応 14	Safari iOS 完全対応 7	Samsung Internet Android 完全対応 1.5