::-moz-progress-bar

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Summary

The ::-moz-progress-bar CSS pseudo-element applies to the area of an HTML <progress> element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars.

You have pretty broad capabilities to style the bar. This can be especially useful with indeterminate bars (via the :indeterminate pseudo-class), where you may wish to substantially change the default appearance; you can change the width and positioning of the bar, for example. (By which we probably mean the whole element's dimensions and position, not just the painted part of the element, as featured in the screenshot below.)

Syntax

::-moz-progress-bar { style properties }

Example

This example styles the progress meter portion of the progress bar with ID redbar with the color red.

HTML

<progress id="redbar" value="30" max="100">30 %</progress>

CSS

#redbar::-moz-progress-bar {
  background-color: red;
}

Result

A bar using this style might look something like this:

Custom styled progress bar

See also

Document Tags and Contributors

 Contributors to this page: Sebastianz, Sohail05, cvrebert, teoli, kscarfone, Sheppy, Ecmanaut
 Last updated by: Sebastianz,