::-webkit-progress-value

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

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

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

構文

css
::-webkit-progress-value {}

例

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

HTML

html

CSS

css
progress {
  -webkit-appearance: none;
}

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

結果

結果のスクリーンショット

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

仕様書

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

ブラウザーの互換性

関連情報