html checkbox样式美化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/huxiangen/article/details/83827858

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
            }

效果图：

demo 图片：