1. ウェブ
  2. CSS
  3. リファレンス
  4. セレクター
  5. ::-webkit-progress-bar

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS ::-webkit-progress-bar 擬似要素

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

::-webkit-progress-bar は CSS の擬似要素で、<progress> 要素の進捗バー全体を表します。通常、デフォルトで ::-webkit-progress-value 擬似要素の下にレンダリングされるため、バーの塗りつぶされていない部分としてのみ表示されます。これは、::-webkit-progress-inner-element 擬似要素の子要素であり、::-webkit-progress-value 擬似要素の親要素です。

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

構文

css
::-webkit-progress-bar {
  /* ... */
}

例

CSS

css
progress {
  -webkit-appearance: none;
}

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

HTML

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

結果

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

以上の上のコードを実行すると、WebKit または Blink ベースのブラウザーでは、次のような進捗バーが表示されます。

進捗バーは、文字1つ分ほどの高さの横棒です。左側の 20% は緑色で、右側の 80% はオレンジ色です。

仕様書

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

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

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

GitHub でこのページを表示 • このコンテンツに関する問題を報告