/* 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;
|
|