因为之前写了一个模拟的音乐播放器，所以对这个input的新属性稍微关注了一下，功能还是很强大的。
type="range" 直接显示一个滑块控件，可拖动。
不过很多时候这个样式不太能满足我们项目的需求，所以这里可以适当调整一下。
修改前样式：
修改后样式：
作为一个拿来主义者，代码给你们：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>input样式调整</title>
<style type="text/css">
input[type=range]:focus {/*清除点击时的input边框*/
outline: none;
}
input[type=range] {
cursor: pointer;
-webkit-appearance: none;/*清除系统默认样式*/
width: 200px;
height: 10px;
background: #ddd;
background: -webkit-linear-gradient(top, rgb(97, 189, 18), rgb(97, 189, 18)) 0% 0% / 40% 100% no-repeat rgb(221, 221, 221);
height: 10px;/*横条的高度*/
}
/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;/*清除系统默认样式*/
height: 10px;/*拖动块高度*/
width: 10px;/*拖动块宽度*/
background: #fff;/*拖动块背景*/
border-radius: 5px; /*外观设置为圆形*/
border: solid 1px #ddd; /*设置边框*/
}
</style>
</head>
<body>
<input type="range" />
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
