选中 复选框单选框 提高用户体验

label 元素不会  呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。

<label> 标签通过for 属性绑定相关元素的 id ，以此触发相关元素。

<div class="xuan-group">
    <input type="checkbox" id="purchase_detail_log1" name="product_danpindan1"/>
    <label for="purchase_detail_log1">标记为已收货</label>
</div>

.xuan-group input[type=checkbox]+label:before, .xuan-group input[type=radio]+label:before {
    content: '';
    line-height: 20px;
    display:inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    color: #fff;
    border:1px solid #e7e7e7;
    background-color: #f0f0f0;
    border-radius:1px;
}
.xuan-group input[type=checkbox]:checked+label:before,.xuan-group input[type=radio]:checked+label:before{
    content:' ';
    background:url(../images/home_check.png) no-repeat;
    background-size:15px 15px;
    border:1px solid transparent;
}