效果
思路
使用checkbox
来实现,勾选、未勾选对应开启、关闭状态,使用:checked
选择器来控制开启状态下的样式显示。
关键
怎样修改checkbox
的原始样式?
appearance
的用武之地(MDN链接),appearance
英译外观、外貌
,作用改变元素的UI
。在MDN上我们可以看到有很多的属性值,注意到checkbox复选框
的appearance
属性值默认就是checkbox
,所以我们将这个元素属性重置为none
后,当做普通元素通过CSS
来实现我们的开关效果,注意前缀。
实现代码
<!DOCTYPE html>
<html>
<head>
<title>switch开关实现</title>
<style type="text/css">
.switch {
width: 57px;
height: 28px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #DCDFE6;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
background-clip: content-box;
display: inline-block;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
user-select: none;
outline: none;
}
.switch::before {
content: '';
position: absolute;
width: 22px;
height: 22px;
background-color: #FFFFFF;
border-radius: 50%;
left: 2px;
top: 0;
bottom: 0;
margin: auto;
transition: .3s;
}
.switch:checked {
background-color: #409EFF;
transition: .6s;
}
.switch:checked::before {
left: 30px;
transition: .3s;
}
</style>
</head>
<body>
<input type="checkbox" class="switch" checked />
</body>
</html>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!