方法一 ：使用图片
.checkbox { display: none; } .checkbox-i{ margin-right: 20px; background-image: url("../img/icon.png"); background-repeat: no-repeat; background-position: -324px -40px; width: 22px; height: 22px; display: inline-block; position: relative; top: 5px; } .checkbox:checked + .checkbox-i{ background-position: -324px -11px; }
<input type="checkbox" class="checkbox " id="test"> <label class="checkbox-i" for="test"></label> <label class="label" for="test"> test </label>
方法二：使用after
<html> <head> <title>aa</title> <style> .chk_1 { display: none;} .chk_1 + label { background-color: #FFF; border: 1px solid #C1CACA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 9px; border-radius: 5px; display: inline-block; position: relative; margin-right: 30px; } .chk_1 + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .chk_1:checked + label { background-color: #ECF2F7; border: 1px solid #92A1AC; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); color: #243441; } .chk_1:checked + label:after { content: '2714'; position: absolute; top: -7px; left: 0px; color: #758794; width: 100%; text-align: center; font-size: 1.4em; padding: 1px 0 0 0; vertical-align: text-top; } </style> </head> <body> <input type="checkbox" id="checkbox_a2" class="chk_1" /><label for="checkbox_a2"></label> </body> <html>
label标签设置方框大小。