::-ms-fill

The ::-ms-fill CSS pseudo-element is a Microsoft extension that represents a progress bar displayed by <progress>. This pseudo-element is available only in Internet Explorer 10, Internet Explorer 11, and Microsoft Edge.

All allowable properties except animation-name apply to a determinate progress bar. Only animation-name applies to an indeterminate one. (A progress bar is determinate if it has a value attribute set; otherwise it is indeterminate. An indeterminate progress bar can be selected with the :indeterminate pseudo-class.)

By default, Internet Explorer and Edge display a moving dots animation for an indeterminate progress bar. By setting animation-name on ::-ms-fill, you can change the animation, as shown in this table:

Allowable Properties

Only the following CSS properties can be used in a rule with ::-ms-fill in its selector. Other properties are ignored.

• animation-name
• background-clip, background-color, background-image, background-origin, background-repeat, and background-size
• border
• border-radius
• box-shadow
• box-sizing
• color
• cursor
• display (values block, inline-block, none)
• font
• height
• margin
• -ms-background-position-x
• -ms-background-position-y
• -ms-high-contrast-adjust
• opacity
• outline-color, outline-style, and outline-width
• padding
• transform and transform-origin
• visibility

Syntax

  ::-ms-fill

Example

HTML

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

CSS

progress::-ms-fill {
  background-color: orange;
}

Result

A progress bar using this style might look something like this:

Browser compatibilityUpdate compatibility data on GitHub

Specifications

Not part of any specification.

See also

• ::-moz-progress-bar
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element