checkbox样式

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;

            }