CSS ::-moz-progress-bar Pseudo-Element

CSS ::-moz-progress-bar Pseudo-Element

The ::-moz-progress-bar pseudo-element is a non-standard Mozilla CSS extension used to style the filled portion of an HTML <progress> element in Firefox. It allows developers to customize the progress indicator without changing the element's value.

Syntax

progress::-moz-progress-bar {
  background-color: #0066cc;
}

The selector targets the filled progress indicator inside an HTML <progress> element in Firefox.

The -moz- prefix identifies this as a Mozilla-specific pseudo-element rather than a standardized CSS feature.

How It Works

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

A determinate progress bar has a known value and maximum. The browser displays the completed portion as a filled area inside the progress track.

Firefox exposes this filled area through ::-moz-progress-bar, allowing CSS to change its appearance independently of the outer control.

Changing the pseudo-element's color or background does not modify the progress value. The amount of progress is determined by the HTML element's attributes or its corresponding JavaScript properties.

Determinate and Indeterminate Progress

The HTML <progress> element supports two progress states.

• Determinate: The current progress is known. The value attribute specifies the completed amount relative to max.
• Indeterminate: The current progress is unknown. The value attribute is omitted, and the browser displays an implementation-dependent progress indicator.

Determinate example:

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

Indeterminate example:

<progress>Loading...</progress>

For determinate progress, the filled portion represents the completed amount. For indeterminate progress, Firefox may display an animated or otherwise changing indicator, depending on its native control styling.

Styling Progress Bars

The ::-moz-progress-bar pseudo-element can be used to apply a custom background color to the filled portion of a progress bar.

progress {
  width: 260px;
  height: 20px;
}
progress::-moz-progress-bar {
  background-color: #28a745;
}

The first rule sets the overall dimensions of the progress element. The second rule colors the filled portion green in Firefox.

Additional styling may be affected by the browser's native control appearance. Test custom progress bars in the browsers and operating systems you intend to support.

Example

The following example creates a progress bar showing that a task is 65 percent complete.

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;
  accent-color: #0066cc;
}
progress::-moz-progress-bar {
  background-color: #0066cc;
}

In Firefox, the filled portion of the progress bar is styled blue. The accent-color property also provides a standardized way to request an accent color for supported native controls.

The value and max attributes determine the amount of progress displayed. CSS controls only the visual presentation.

Cross-Browser Styling

Firefox and Chromium-based browsers expose different internal pseudo-elements for styling HTML progress bars.

Firefox uses ::-moz-progress-bar, while Chrome and other Blink-based browsers support ::-webkit-progress-value for the filled portion.

The following example uses separate rules for these browser-specific selectors.

progress {
  width: 260px;
  height: 20px;
  accent-color: #0066cc;
}
progress::-moz-progress-bar {
  background-color: #0066cc;
}
progress::-webkit-progress-value {
  background-color: #0066cc;
}

Separate rules are used because browsers may discard a selector list containing an unsupported pseudo-element.

For simpler customization, the standardized accent-color property can be used where supported. The browser still controls the native appearance, so the exact result may vary.

Browser Support

::-moz-progress-bar is a non-standard Mozilla-specific pseudo-element supported by Firefox. It is not supported by Chrome, Edge, or Safari.

Other browser engines provide different mechanisms for styling the internal parts of progress controls. The HTML <progress> element itself is widely supported.

For current compatibility information, visit Can I Use? and search for HTML progress or CSS accent-color support.

Specifications

::-moz-progress-bar is a proprietary Mozilla extension and is not defined in a standard CSS specification.

The HTML <progress> element is defined in the WHATWG HTML Living Standard .