一:html
<div class="deal">
<input type="checkbox" name="checkbox" id="checkbox" checked value=""/>
<span></span>
<label for="checkbox">我已阅读并同意</label>
</div>
二:css
.deal {
width: 100%;
margin: 35px auto 0;
text-align: center;
color: white;
font-size: 15px;
}
.deal input[type='checkbox'] {
appearance: none;
-webkit-appearance: none;
outline: none;
display: none;
}
.deal input[type='checkbox']+span {
width: 16px;
height: 16px;
display: inline-block;
background: url(../img/nocheck.png) no-repeat center;
background-size: 100% 100%;
position: relative;
top: 2px;
}
.deal input[type='checkbox']:checked+span {
width: 16px;
height: 16px;
display: inline-block;
background: url(../img/check.png) no-repeat center;
background-size: 100% 100%;
position: relative;
top: 2px;
}