html：
<label class="my_protocol">
<input class="input_agreement_protocol" type="checkbox" />
<span></span>
</label>
css：
/*隐藏掉我们模型的checkbox*/
.my_protocol .input_agreement_protocol {
appearance: none;
-webkit-appearance: none;
outline: none;
display: none;
}
/*未选中时*/
.my_protocol .input_agreement_protocol+span {
width: 16px;
height: 16px;
background-color: red;
display: inline-block;
background:url(../img/hook2.png) no-repeat;
background-size:0.33rem;
background-position-x: 0px;
background-position-y: -25px;
position: relative;
top: 3px;
border:0.01rem solid #9c9c9c;
border-radius:50%;
}
/*选中checkbox时,修改背景图片的位置*/
.my_protocol .input_agreement_protocol:checked+span {
background-position: 0 0px;
border:0rem;
}
