首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

::-moz-range-thumb

非标准

这个功能是非标准的,不在标准轨道上。不要在面向 Web 的生产站点上使用它:它不适用于每个用户。实现之间也可能存在很大的不兼容性,并且行为在未来可能会发生变化。

::-moz-range-thumb CSS伪元件是Mozilla的扩展,表示拇指的(即,虚拟旋钮)<input>type="range"。用户可以沿着输入轨迹移动拇指以改变其数值。

注意:使用::-moz-range-thumb任何东西,但一个<input type="range">不匹配任何东西,没有任何效果。

语法

代码语言:javascript
复制
::-moz-range-thumb

示例

HTML

代码语言:javascript
复制
<input type="range" min="0" max="100" step="5" value="50"/>

CSS

代码语言:javascript
复制
input[type=range]::-moz-range-thumb {
  background-color: green;
}

结论

使用这种风格的进度条可能如下所示:

特征

不是任何规格的一部分。这是 Gecko 特有的专有伪元素。

浏览器兼容性

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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com