<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .group .label { color: #aaa; font-size: 12px; } .group .button { background: #1161ee; } .group label .icon { width: 15px; height: 15px; border-radius: 2px; position: relative; display: inline-block; background: rgba(255, 255, 255, .1); } /*在文字前设置<span class="icon"></span>使用伪类，两个一样大小的直线，设置过度*/ .group label .icon:before, .group label .icon:after { content: ''; width: 10px; height: 2px; background: #fff; position: absolute; -webkit-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s; } /*分别对before和after进行定位*/ .group label .icon:before { left: 3px; width: 5px; bottom: 6px; -webkit-transform: scale(0) rotate(0); -ms-transform: scale(0) rotate(0); transform: scale(0) rotate(0); } .group label .icon:after { top: 6px; right: 0; -webkit-transform: scale(0) rotate(0); -ms-transform: scale(0) rotate(0); transform: scale(0) rotate(0); } /*当checkbox被选中时，改变选项文字所在label标签的颜色和span标签的背景色，并且使span的伪类进行 旋转，使两个伪类组成对号形状*/ .group .check:checked + label { color: #ff6700; } .group .check:checked + label .icon { background: #1161ee; } .group .check:checked + label .icon:before { -webkit-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); } .group .check:checked + label .icon:after { -webkit-transform: scale(1) rotate(-45deg); -ms-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); } .icon{ border: 1px solid #1161ee; } </style> </head> <body> <div class="group"> <input id="check" type="checkbox" class="check" checked style="display: none;" /> <label for="check"><span class="icon"></span> 记住密码</label> </div> </body> </html>