::-webkit-progress-value

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

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

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

構文

css

::-webkit-progress-value {}

この例は Blink または WebKit ベースのブラウザーでのみ動作します。

html

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

css

progress {
  -webkit-appearance: none;
}

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