【css】css实现点击Toggle功能icon切换①实现Toggle功能
html结构：
<div class="cssTog">
icon图标库
<label>
<p> 专业：B020309现代企业管理（独⽴本科段）</p>
</label>
<input type="checkbox">
</div>
css写法：
.cssTog{position:relative}
.cssTog input{position:absolute;top:0;left:0;width:100%;opacity: 0}
.
cssTog input:active+.sub ,label input:focus+.sub{display: block;}
.cssTog input+.sub{display: none;}
js处理ios真实设备以上点击⽆效解决代码：document.body.addEventListener('touchstart', function () { });  //iOS移动设备:ac
②实现icon切换
另外，⼀般可input:checked⽤于点击切换icon图标
html结构：
<label>
<input type="checkbox"/>
<i class="icon"></i>
记住密码
</label>
label{position:relative}
label input{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;}
label .icon{width:16px;height:16px;display:inline-block;vertical-align:middle;background:red;}
label input:checked+.icon{background:green;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。