CSS - ::-moz-range-track

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

Example

 

CSS content

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

HTML content

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

Output

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

A range with the track green.

Syntax  

CSS
::-moz-range-track { <var>style properties</var> }

Description  

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

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

Browser Compatibility  

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) No support No support No support No support
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Yes) No support No support No support No support

See Also  

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/::-moz-range-track

CSS CSS Pseudo-element Non-standard Pseudo-element Reference