您的位置 首页 css教程

css如何实现开关效果

首先是构思:

我们使用<input type="checkbox">标签来实现这个效果。

checkbox的选中、未选中的特性,刚好对应开关的打开、关闭

on:打开 off:关闭

<label for="ck2">  <input type="checkbox" id="ck2">  <span>未选中,则关闭开关</span></label><br><label for="ck1">  <input type="checkbox" id="ck1" checked>  <span>选中,则打开开关</span></label>

效果:

5c9130705213b1a036c5edc97913bd3.png

文章来源:火云技术网

文章标题:css如何实现开关效果

文章地址:https://www.pyhw.net/30541_css%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%bc%80%e5%85%b3%e6%95%88%e6%9e%9c.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图