CSS3美化复选框checkbox

效果

CSS3美化复选框checkbox

HTML

<div class="check-wrap">
    <input type="checkbox" class="icheck" id="checkbox1" name="check" value="1" checked/>
    <label for="checkbox1" class="ilabel"></label>文字1
</div>
<div class="check-wrap">
    <input type="checkbox" class="icheck" id="checkbox2" name="check" value="2"/>
    <label for="checkbox2" class="ilabel"></label>文字2
</div>
<div class="check-wrap">
    <input type="checkbox" class="icheck" id="checkbox3" name="check" value="3"/>
    <label for="checkbox3" class="ilabel"></label>文字3
</div>

* 注意input的id和label的for必须一致

CSS

.check-wrap { position: relative; display: inline-block; vertical-align: middle; height: 24px; padding-left: 13px; line-height: 24px; font-size: 16px;color:#444444;}
.check-wrap~.check-wrap{
    margin-left: 10px;
}
.check-wrap > .icheck { opacity: 0; }
.check-wrap > .ilabel { border-radius: 3px; cursor: pointer; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.check-wrap > .ilabel:after {content: " ";border: 1px solid #999;display: block;font-weight: bold;text-align: center;border-radius: 3px;width: 22px;height: 22px;line-height: 22px;}
.check-wrap > .icheck:checked + .ilabel:after {content: "✓";border-color: #999;background-color: #fff;color: #3ad045;}
.check-wrap > .icheck:indeterminate + .ilabel:after { content: "■"; color: #3f51b5; background-color: #FFF; border-color: #3f51b5; }