H5滑条(input type=range)

最新推荐文章于 2023-12-28 17:39:39 发布

weixin_30508241

最新推荐文章于 2023-12-28 17:39:39 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jyc226/p/7832176.html

本文介绍如何使用CSS对HTML中的滑动条(input[type=range])进行自定义样式设置，包括滑动条的轨道、滑块等元素的外观定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input[type=range] {
-webkit-appearance: none;
width: 230px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
display: block;
margin: 0 auto;
margin-top: 20px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px; /*将轨道设为圆角的*/
/*box-shadow: 0 1px 1px yellow, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
background: #6A8EF5;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 32px;
width: 32px;
margin-top: -8px; /*使滑块超出轨道部分的偏移量相等*/;
background-color: yellow;
background: url(../image/jb.png);
background-size: 100% 100%;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em yellow; /*设置边框*/
/* box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}