您现在的位置是:首页 > WEB > html+csshtml+css

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

阿龙2019-06-01【html+css】人已围观

简介众所周知,在html中能用css实现的就尽可能用css实现,不能用css实现的才考虑用javascript,这是因为过多的javascript代码会使网页加载速度过慢,本文案例是纯css实现的切换开关按钮。

首先创建一个标签输入复选框,这样我们就可以改变标签的开关打开时复选框被选中的开关关断时没有选中。
<input type=“checkbox”id=“toggle”class=“checkbox”/><label for=“toggle”class=“switch”></ label>
标签位于输入下方,以便我们可以使用选择标签adjacent selector(+) 。

现在复选框已创建。
效果如图:

现在我们需要将标签 更改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;
}
这下,当选中复选框时,就基本完全一样了,如图:

最后我们再隐藏复选框就大功告成。
.checkbox {
display:none;
}
如果大虾有更好的方法,请在寻觅博客评论留言分享。

Tags:html   css   开关按钮   切换开关   制作

支持一下! ()

文章评论

    共有条评论大侠,来闹两句...

    请输入昵称:

    填入验证码:

打赏本站

  • 如果您觉得站长文章不错,可以通过扫码支付打赏一下哦!
  • 微信扫码:您说多少就多少~
  • 支付宝扫码:您说多少就多少~