效果对比：
“\2713”实体符号√ ；如有兴趣查看详细实体符号请点这里
代码实现：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 input[type="checkbox"] { 9 width: 12px; 10 height: 12px; 11 display: inline-block; 12 text-align: center; 13 vertical-align: middle; 14 line-height: 12px; 15 position: relative; 16 } 17 18 input[type="checkbox"]::before { 19 content: ""; 20 position: absolute; 21 top: 0; 22 left: 0; 23 background: #fff; 24 width: 100%; 25 height: 100%; 26 border: 1px solid #CACDCF 27 } 28 29 input[type="checkbox"]:checked::before { 30 content: "\2713"; 31 background-color: #2196F3; 32 color: #fff; 33 position: absolute; 34 top: 0; 35 left: 0; 36 width: 100%; 37 border: 1px solid #2196F3; 38 font-size: 12px; 39 font-weight: bold; 40 } 41 </style> 42 </head> 43 44 <body> 45 <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label> 46 <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label> 47 <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label> 48 <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label> 49 <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label> 50 <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label> 51 </body> 52 53 </html>