::-ms-fill-lower

The ::-ms-fill-lower CSS pseudo-element represents the lower portion of the track of a slider control; that is, the portion corresponding to values less than the value currently selected by the thumb. A slider control is one possible representation of <input type="range">.

Allowable Properties

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

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

Specifications

Not part of any specification.

Browser compatibilityUpdate compatibility data on GitHub

See also

• Internet Explorer and Microsoft Edge use these pseudo-elements to style other parts of a range input:
  • ::-ms-fill-upper
  • ::-ms-track
  • ::-ms-thumb
• ::-moz-range-progress
• CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
• QuirksMode: Styling and scripting sliders