CSS ::-webkit-progress-bar Pseudo-Element

The ::-webkit-progress-bar pseudo-element is a non-standard CSS extension used to style the background track of an HTML <progress> element in WebKit and Blink-based browsers. It allows developers to customize the track's color, borders, and rounded corners independently of the filled portion that represents task completion.

Syntax

progress::-webkit-progress-bar {
  background-color: #e0e0e0;
}

The pseudo-element is appended to a selector targeting an HTML <progress> element. CSS declarations inside the rule affect the background track in browsers that recognize the selector.

The -webkit- prefix identifies a browser-specific extension rather than a standardized CSS pseudo-element.

How It Works

The HTML <progress> element represents the completion progress of a task, such as uploading a file, processing information, or completing an installation.

Browsers typically display a progress element as a horizontal bar with a background track and a filled portion representing the completed amount.

The ::-webkit-progress-bar pseudo-element targets the background track in supported WebKit and Blink implementations.

Developers can change the track's appearance without modifying the task's current progress or maximum value.

The value and max HTML attributes determine the completion amount. CSS controls the visual presentation of the progress bar.

Progress Bar Components

WebKit and Blink implementations expose several internal pseudo-elements associated with HTML progress controls.

::-webkit-progress-bar - Styles the background track of the progress bar.
::-webkit-progress-value - Styles the filled portion representing completed progress.
::-webkit-progress-inner-element - Targets an internal container associated with the progress element's rendering structure.

These pseudo-elements serve different purposes. The track provides the visual background, while the value indicator shows how much of the task has been completed.

The internal container is an implementation detail and may not respond consistently to CSS declarations across browsers.

Styling the Background Track

Common CSS properties used with ::-webkit-progress-bar include background, border, border-radius, and box-shadow.

progress {
  width: 260px;
  height: 20px;
}
progress::-webkit-progress-bar {
  background: #e0e0e0;
  border: 1px solid #aaa;
  border-radius: 6px;
  box-shadow: none;
}

The width and height properties control the overall dimensions of the progress element.

The background property changes the track color, while border and border-radius define its outline and rounded corners.

The box-shadow: none declaration removes any shadow applied to the targeted track by the browser's native styling.

Because progress bars are browser-rendered controls, their appearance may vary between browsers and operating systems.

Example

The following example creates a progress bar showing 65 percent completion, with a gray background track and a blue filled portion.

HTML:

<label for="upload-progress">Upload progress: 65%</label>
<progress id="upload-progress" value="65" max="100">65%</progress>

CSS:

progress {
  display: block;
  width: 260px;
  height: 20px;
  appearance: none;
}
progress::-webkit-progress-bar {
  background: #e0e0e0;
  border-radius: 6px;
}
progress::-webkit-progress-value {
  background: #0066cc;
  border-radius: 6px;
}

The progress element represents a task that is 65 percent complete.

In supported browsers, the background track appears gray and the filled portion appears blue.

The appearance: none declaration requests removal of the browser's native appearance so that custom styling can be applied.

The ::-webkit-progress-bar selector styles the track, while ::-webkit-progress-value styles the completed portion.

Changing the value attribute updates the amount of the bar that is filled without requiring changes to the CSS.

Determinate and Indeterminate Progress

The HTML <progress> element supports two types of progress indication.

Determinate Progress

A determinate progress bar represents a task with a known completion amount. It uses the value and max attributes.

<progress value="40" max="100">40%</progress>

This example represents a task that is 40 percent complete.

Indeterminate Progress

An indeterminate progress bar represents a task that is in progress but whose completion amount is unknown.

<progress>Loading...</progress>

Without a value attribute, the browser displays an indeterminate progress indicator, which may use animation or another visual effect.

The ::-webkit-progress-bar pseudo-element targets the background track where supported, but the rendering of indeterminate progress is browser-dependent.

Note: Setting value="0" creates a determinate progress bar at zero completion. Omitting the value attribute creates an indeterminate progress bar.

Cross-Browser Styling

Different browser engines use different pseudo-elements for styling HTML progress controls.

Chrome, Edge, and Safari support WebKit-prefixed progress selectors. Firefox provides ::-moz-progress-bar for styling the filled portion of a progress bar.

The following example combines these browser-specific approaches.

progress {
  width: 260px;
  height: 20px;
  appearance: none;
  border: none;
  border-radius: 6px;
  background: #e0e0e0;
}
progress::-webkit-progress-bar {
  background: #e0e0e0;
  border-radius: 6px;
}
progress::-webkit-progress-value {
  background: #0066cc;
  border-radius: 6px;
}
progress::-moz-progress-bar {
  background: #0066cc;
  border-radius: 6px;
}

In WebKit and Blink implementations, separate pseudo-elements control the background track and completed portion.

In Firefox, the Mozilla-specific selector targets the completed portion, while the outer <progress> element can provide the track background.

These rules can produce similar results, but browser-specific rendering differences may remain.

For simpler customization, the standardized accent-color property can influence the color of native progress indicators in supporting browsers without requiring internal pseudo-element selectors.

Accessibility Considerations

Custom progress bars should clearly communicate task completion while preserving the accessibility features of the native HTML element.

Provide a visible label describing the task being measured.
Use accurate value and max attributes for determinate progress.
Omit the value attribute when the completion amount is unknown.
Maintain sufficient contrast between the track and completed portion.
Provide readable progress information rather than relying entirely on the filled bar.
Update the progress value when the task advances.

For example, the text "Upload progress: 65%" communicates the completion amount without requiring users to interpret the bar visually.

When progress changes dynamically, update the displayed percentage and the value attribute together. For accessibility, also consider how changes are announced to assistive technology users.

Use the HTML <meter> element instead when representing a measurement within a known range rather than the completion of a task.

Browser Support

::-webkit-progress-bar is a non-standard browser-specific pseudo-element recognized by WebKit and Blink implementations, including Safari, Chrome, and Edge.

Firefox does not use this selector for its native progress controls. It provides ::-moz-progress-bar for styling the filled portion.

The HTML <progress> element itself is widely supported, but styling its internal components remains browser-dependent.

For current compatibility information, visit Can I Use? and search for the HTML progress element. General progress element support does not guarantee support for this particular pseudo-element.

Specifications

::-webkit-progress-bar is a proprietary browser extension and is not defined as a standardized pseudo-element in a CSS specification.

The HTML <progress> element and its attributes are defined in the WHATWG HTML Living Standard .