1. 程式人生 > >CSS案例 -- 美化checkbox框

CSS案例 -- 美化checkbox框

check padding eat som size 開發 splay 我們 nds

  在開發項目中,我們經常要美化checkbox框。下面是只用css實現checkbox選中美化

<div class=‘div-checkbox‘>
    <input type="checkbox" id=‘handsome‘ />
    <label for=‘handsome‘ >我很帥</label>
</div>    

#handsome{
  display:none;          
}

.div-checkbox input + label {
    background:url(./a.png) no-repeat;
    background-size:20px 20px;
    padding-left:20px;
}

.div-checkbox input:checked + label {
      background:url(./b.png) no-repeat;
}

CSS案例 -- 美化checkbox框