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

标签：资料   log   start   :focus   color   vertica   over   list   art   

①实现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

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

标签：资料   log   start   :focus   color   vertica   over   list   art   

原文地址：http://www.cnblogs.com/smilexumu/p/7867078.html