使用css美化單選框(radio)和複選框(checkbox)的樣式
阿新 • • 發佈:2018-12-31
//html
<label>
<input name="checkbox" class="checkbox" type="checkbox"/>
<s></s><span>天空</span>
</label>
<label>
<input name="checkbox" class="checkbox" type="checkbox"/>
<s></s><span>大地</span>
</label>
通過以上的HTML,將label與複選框關聯起來,這樣點選label就相當於點選複選框
//css
//隱藏預設的複選框樣式
.checkbox{
display: none;
}
//自定義未選中的複選框樣式
.checkbox[type=checkbox]+s{
width: 16px;
height: 16px;
display: inline-block;
background-image: url('http://host/name1.png');
background-repeat: no-repeat;
}
//自定義選中時的複選框樣式
.checkbox[type=checkbox]:checked+s{
background-image: url('http://host/name2.png' );
}
單選框: 將checkbox換成radio即可