::-moz-range-progress

翻译正在进行中。

非标准
该特性是非标准的,请尽量不要在生产环境中使用它!

The ::-moz-range-progress CSS 伪元素 是一个 Mozilla 扩展。它代表了指示器在其中滑动的轨道的下部(即凹槽)是一个 type="range" 类型的 <input> 。此部分对应的值低于揪揪当前选择的值(即虚拟旋钮)。

注意: 在 <input type="range">上应用::-moz-range-progress 不会匹配任何元素,也不会有任何效果。

语法

::-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;
}

结果

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

规范

无内容

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::-moz-range-progress
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 22IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 22Opera 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.

相关阅读