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;
? ? ? ? ? ? }
