【css】css实现点击Toggle功能/icon切换

①实现Toggle功能

html结构：

<div class="cssTog"><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;}

①参考资料：http://blog.csdn.net/freshlover/article/details/43735273