input的range类型滑动条的自定义样式设置

版权声明： https://blog.csdn.net/qq_39207948/article/details/85880391

 完整代码的项目应用--视频播放器中的音量和播放进度滑动条

/* unholy css to style input type="range" */
/*主要是滑动条的自定义样式设置*/

/*去除系统默认的滑动条样式，主要针对基于webkit的浏览器*/
input[type=range] {
  -webkit-appearance: none;
  background:transparent;
  width: 100%;
  margin: 0 5px;
}
/*原始的控件获取到焦点时，会显示包裹整个控件的边框，所以还需要把边框取消。*/
input[type=range]:focus {
  outline: none;
}

/*开始自定义滑动条控件的样式*/

/*自定义滑动控件的轨道*/
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: rgba(255,255,255,0.8);  /*滑动条轨道背景颜色*/
  border-radius: 3.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}
/*自定义滑动控件的滑块*/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  border-radius: 50px;
  background: #ffc600; /*和进度条的填充部分一个颜色*/
  cursor: pointer;
  margin-top: -3.5px;
  box-shadow:0 0 2px rgba(0,0,0,0.2);
}
/*自定义滑动条获得焦点时的背景颜色*/
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #bada55;
}

/*兼容Firefox浏览器*/
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 3.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
}