您现在的位置是:首页 > IT分类 > html+js网站首页html+js利用html加css制作一个切换开关按钮

利用html加css制作一个切换开关按钮

  • 蓝天
  • html+js
  • 2020-03-08 14:40:16
简介首先创建一个标签输入复选框,这样我们就可以改变标签的开关打开时复选框被选中的开关关断时没有选中。<input type=“checkbox”id=“toggle”class=“checkbox”/><label fo
首先创建一个标签输入复选框,这样我们就可以改变标签的开关打开时复选框被选中的开关关断时没有选中。
<input type=“checkbox”id=“toggle”class=“checkbox”/><label for=“toggle”class=“switch”></ label>
现在我们需要将标签 更改position为relative ,以便我们可以使用label::after和样式显示为开关。display : inline-block; 也可以设置,以便我们可以为标签应用宽度和高度。
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: #eee;
border-radius: 20px;
}
接着让我们使用::after 伪类将圆圈⭕️添加到切换开关 ,这样看起来更美观。
.switch::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
现在我们需要在选中复选框时更改圆的背景颜色和位置,因为如果选中了输入框,则使用 :checked属性,input.然后更改背景颜色label并更改圆的位置。
.checkbox:checked+.switch::after {
left: 20px;
}
.checkbox:checked+.switch {
background-color: #7983ff;
}
这下,当选中复选框时,就基本完全一样了,如图:

vAV蓝天个人博客-一个自学的好博客

最后我们再隐藏复选框就大功告成
.checkbox {
display:none;
}
 

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。

文章评论

联系方式