"CSS" CSS implementation click Toggle function/icon Switch

① implementation of Toggle functions

HTML structure:

<div class= "Csstog" >
<label>
    <p> Major: B020309 Modern Enterprise Management (independent undergraduate section) </p>
</label>
<input type= "checkbox" >
</div>

CSS notation:
. 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 processing iOS Real device above click Invalid Resolution code: Document.body.addEventListener (' Touchstart ', function () {});  iOS mobile device: AC

② Implement icon Toggle
In addition, it is generally possible to input: checked for click to toggle icon

HTML structure:

<label>
<input type= "checkbox"/>
<i class= "icon" ></i>
Remember the password
</label>

Label{position:relative}
Label input{width:100%;height:100%;p osition: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;}

① Reference: http://blog.csdn.net/freshlover/article/details/43735273

"CSS" CSS implementation click Toggle function/icon Switch