原理: label 绑定 checkBox, 可以通过点击该label来触发该 checkBox,通过 labe l的 :after 或 :before伪类来修改样式
HTML:
<div> <input type="checkBox" id="checkBox_a1" class="chk_1" value="徒步" /> <label for="checkBox_a1">徒步</label> <input type="checkBox" id="checkBox_a2" class="chk_1" value="游泳" /> <label for="checkBox_a2">游泳</label> <input type="checkBox" id="checkBox_a3" class="chk_1" value="跑步" /> <label for="checkBox_a3">跑步</label> </div>
CSS:
<style> .chk_1 { display: none; } .chk_1 + label { background-color: #fff; border: 1px solid #c1caca; Box-shadow: 0 1px 2px rgba(0,0.05),inset 0px -15px 10px -12px rgba(0,0.05); padding: 9px; border-radius: 5px; display: inline-block; position: relative; vertical-align: middle; } .chk_1 + label:active { Box-shadow: 0 1px 2px rgba(0,inset 0px 1px 3px rgba(0,0.1); } .chk_1:checked + label { background-color: #ecf2f7; border: 1px solid #92a1ac; Box-shadow: 0 1px 2px rgba(0,inset 15px 10px -12px rgba(255,255,0.1); color: #243441; } .chk_1:checked + label:after { content: "\2714"; position: absolute; top: -6px; left: 0px; color: #758794; width: 100%; text-align: center; font-size: 1.2em; padding: 1px 0 0 0; vertical-align: text-top; } </style>
效果:
Skill comes from consistent and deliberate practice. ---Shawn Allen
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。