总结

 ::-webkit-slider-thumb

这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效

使用方式

该伪类需要配和::-webkit-slider-runnable-track使用,否则会没有效果.......

input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;/*清除默认样式*/
    height:7vw;/*设置滑块高度*/
    width:5vw;/*设置滑块宽度*/
    background:#000;/*设置背景色*/
    border-radius:10vw 10vw;/*加个圆角边*/
    margin-top:-1vw;/*使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
}
input[type=range]::-webkit-slider-runnable-track{
    border-radius: 30px; 
    background:#128;
    height:15px;
}

规范

这不是任何规范中的一部分,这是webkit/bink内核特有的(chrome/safari)

另请参阅

文档标签和贡献者

标签: 
此页面的贡献者: Songyakang
最后编辑者: Songyakang,