::-moz-range-progress

语法

示例

HTML

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

CSS

input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}

结果

使用了这个样式的进度条可能会看起来这样：

规范

无内容

浏览器兼容性

参见

• Gecko 用于设置范围输入的其他部分样式的伪元素：

  • ::-moz-range-thumb 代表在凹槽中滑动的指示器
  • ::-moz-range-track 代表有揪揪滑动的凹槽

• 其他浏览器使用的类似伪元素：

  • ::-ms-fill-upper, Internet Explorer 和 Edge 支持的伪元素

• CSS-Tricks：使用 CSS 设置跨浏览器兼容范围输入的样式

• QuirksMode：样式和脚本滑块