::-moz-range-track

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.

The ::-moz-range-track CSS pseudo-element is a Mozilla extension that represents the track (i.e., groove) in which the indicator slides in an <input> of type="range".

Note: Using ::-moz-range-track with anything but an <input type="range"> doesn't match anything and has no effect.

Syntax

::-moz-range-track

Example

HTML

<input type="range" min="0" max="100" step="5" value="50"/>

CSS

input[type=range]::-moz-range-track {
  background-color: green;
}

Result

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

A range with the track green.

Specifications

Not part of any specification. This is a proprietary pseudo-element specific to Gecko.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-moz-range-track
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 21IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 21Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

See also

関連トピック
  1. CSS
  2. CSS Reference
  3. CSS Selectors
  4. Guides
    1. Using the :target pseudo-class in selectors
  5. Properties
    1. Selector list
  6. Basic Selectors
    1. Type selectors
    2. Class selectors
    3. ID selectors
    4. Universal selectors
    5. Attribute selectors
  7. Combinators
    1. Adjacent sibling combinator
    2. General sibling combinator
    3. Child combinator
    4. Descendant combinator
    5. Column combinator
  8. Pseudo-classes
    1. :active
    2. :any-link
    3. :checked
    4. :blank
    5. :default
    6. :defined
    7. :dir()
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible
    17. :focus-within
    18. :has()
    19. :host()
    20. :host-context()
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :is() (:matches(), :any())
    26. :lang()
    27. :last-child
    28. :last-of-type
    29. :left
    30. :link
    31. :not()
    32. :nth-child()
    33. :nth-last-child()
    34. :nth-last-of-type()
    35. :nth-of-type()
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range
    40. :placeholder-shown
    41. :read-only
    42. :read-write
    43. :required
    44. :right
    45. :root
    46. :scope
    47. :target
    48. :valid
    49. :visited
    50. :where()
  9. Pseudo-elements
    1. ::-moz-progress-bar
    2. ::-moz-range-progress
    3. ::-moz-range-thumb
    4. ::-moz-range-track
    5. ::-ms-browse
    6. ::-ms-check
    7. ::-ms-clear
    8. ::-ms-expand
    9. ::-ms-fill
    10. ::-ms-fill-lower
    11. ::-ms-fill-upper
    12. ::-ms-reveal
    13. ::-ms-thumb
    14. ::-ms-ticks-after
    15. ::-ms-ticks-before
    16. ::-ms-tooltip
    17. ::-ms-track
    18. ::-ms-value
    19. ::-webkit-progress-bar
    20. ::-webkit-progress-value
    21. ::-webkit-slider-runnable-track
    22. ::-webkit-slider-thumb
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue
    27. ::first-letter (:first-letter)
    28. ::first-line (:first-line)
    29. ::grammar-error
    30. ::marker
    31. ::part()
    32. ::placeholder
    33. ::selection
    34. ::slotted()
    35. ::spelling-error