自定义range样式 input[type=range]
程序员文章站
2022-07-14 13:29:26
...
效果图样式:
IE下 其他浏览器
说明:IE下"滑块"的高度最高和"滑动条"一致,所以和其他浏览器的效果不一样。
/*清除原有样式*/
input[type=range] {
-webkit-appearance: none;
width: 16vw;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
/*设置滑动条的样式*/
input[type=range]::-webkit-slider-runnable-track {
height: 0.3vh;
background: #509EFE;
}
input[type=range]::-moz-range-track {
height: 0.3vh;
background: #509EFE;
}
/*去除获取焦点时的边框*/
input[type=range]:focus {
outline: none;
}
/*设置滑块样式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 0.7vw;
width: 1.4vh;
background: #509EFE;
margin-top: -5px;
}
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
height: 0.7vw;
width: 1.4vh;
background: #509EFE;
margin-top: -5px;
}
/*IE下*/
input[type=range] {
-webkit-appearance: none;
width: 16vw;
background: #509EFE;
}
/*设置IE下滑动条的样式*/
input[type=range]::-ms-track {
height: 8px;
border-color: transparent; /*去除原有边框*/
color: transparent; /*去除轨道内的竖线*/
background: #E6EFFB;
}
/*设置IE下滑块样式*/
input[type=range]::-ms-thumb {
height: 8px;
width: 35px;
background: #61A5FF;
}
input[type=range]:focus::-ms-fill-lower {
background: #E6EFFB;
border: none;
}
input[type=range]:focus::-ms-fill-upper {
background: #E6EFFB;
border: none;
}
"本文章是集各大佬之精华而成,欢迎在下方评论,谢谢~"