admin 管理员组文章数量: 1087139
2024年5月25日发(作者：scaleup插件)
input range 轨道滑过区域的样式
input range 轨道滑过区域的样式可以通过以下方式进行设置：
```css
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)::-webkit-slider-runnable-track`部分用于设置轨
道滑过区域的样式，包括宽度、高度、背景颜色、边框和圆角半径等。
`input(type=range)::-webkit-slider-thumb`部分用于设置滑块的样式，包括大小、形状、
颜色和边框等。你可以根据自己的需求修改这些样式。
需要注意的是，上述代码是基于webkit 内核的浏览器编写的，对于其他内核的浏览器
可能需要使用不同的代码来实现相同的效果。
版权声明：本文标题：input range 轨道滑过区域的样式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1716593670a693765.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论