【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