简介
网页UI自定义组件第二讲 自定义滑杆。网页上常见的种种UI效果我们经常感觉太漂亮了。接下来的几天我们会一直来使用CSS3来制作一些常见的UI效果，来改变浏览器默认UI效果。请大家持续关注。今天我们要分享的是关于浏览器的表单元素中最让人头疼的滑块效果。同样的会贴上视频。
常见的网页UI效果
案例效果
技巧说明
使用CSS3伪类：同样的要取消掉浏览器的默认效果，使用-webkit-appearance: none来去掉，显示滑块的样式使用伪类-webkit-slider-thumb来进行控制。详细效果请参见视频
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border: none;
}
div{
margin:100px auto;
width: 600px;
}
input[type="range"]{
width: 100%;
outline: none;
-webkit-appearance:none;
height: 2px;
background: deepskyblue;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
width: 20px;
height: 20px;
background: lightblue;
border-radius: 100%;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="100" value="0" step="1" />
</div>
</body>
</html>
