html设置点击变换图标 【css】css实现点击Toggle功能/icon切换

①实现Toggle功能

html结构：

专业：B020309现代企业管理(独立本科段)

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{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;}

①参考资料：/freshlover/article/details/43735273

原文：/smilexumu/p/7867078.html