纯CSS 实现JS最常见的 点击隐藏 点击显示效果

2017-4-9 0phpcom 学习笔记

<style>
    [type=checkbox] {display:none;}
    [type=checkbox]~input {display:none;}
    [type=checkbox]:checked~input {display:inline-block;}
    [type=checkbox]~span {cursor:pointer;margin-right:10px;}
    [type=checkbox]~span:before {content:'点我显示文本框';}
    [type=checkbox]~span:hover {color:#C30;}
    [type=checkbox]:checked~span:before {content:'点我隐藏文本框';}
</style>

	<label><input type="checkbox" /><span></span><input /></label>

更多内容：php程序员学习笔记