html checkbox樣式美化

思路：使用label結合checkbox，背景圖片進行美化。

原理：

　　1. for 屬性規定 label 與哪個表單元素綁定，顯式綁定和隱式綁定,均可實現checkbox的選用與取消效果，具體見：<label> 標簽的 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
            }

 

 效果圖:

 

 demo 圖片: icon_checkbox.zip