效果
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; }