::-webkit-slider-thumb

总结

::-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)

另请参阅