思路：使用label结合checkbox，背景图片进行美化。

原理：

1. for 属性规定 label 与哪个表单元素绑定，显式绑定和隐式绑定,均可实现checkbox的选用与取消效果，具体见：标签的 for 属性

编码实现：

这里我们通过隐藏默认的checkbox,添加一个行内元素span并控制span在checkbox不同状态下的样式即可。

1.html:

<label class="my_protocol">

<input class="input_agreement_protocol" type="checkbox" />

<span></span>

</label>

2. 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(../../Images/TalentsRegister/icon_checkbox.png) no-repeat;

background-position-x: 0px;

background-position-y: -25px;

position: relative;

top: 3px;

}

/*选中checkbox时,修改背景图片的位置*/

.my_protocol .input_agreement_protocol:checked+span {

background-position: 0 0px

}