CSS `::-webkit-progress-inner-element` 擬似要素

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

::-webkit-progress-inner-element は CSS の擬似要素で、<progress> 要素のもっとも外側のコンテナーを表します。これは ::-webkit-progress-bar 擬似要素の親です。

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

構文

css

::-webkit-progress-inner-element {
  /* ... */
}

これらの例は Blink および WebKit のみで動作します。

この例では、進捗バーの周囲に 2px の黒い境界線を追加しています。

html

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

css

progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}

Blink または WebKit ベースのブラウザーを使用していない人向けに例を示します。以上のようなコードを実行すると、次のような進捗バーが表示されます。

どの仕様書にもありません。

このページは MDN の貢献者によって 2026年8月11日に最終更新されました。