html radio表单美化,checkbox,radio自定义美化表单

原理

利用label标签，包裹input的时候，点击label等同于点击input,再用背景图片显示选中和取消选中状态

效果

图片

复选

*{

padding:0;

margin:0;

}

input[type='checkbox']{

display: none;

}

label{

display: inline-block;

}

label input[type='checkbox']+span{

width: 32px;

height: 32px;

display: inline-block;

background: url(images/checkbox.png)no-repeat 0 0 /32px 32px;

}

label input[type='checkbox']:checked+span{

background: url(images/checkbox_checked.png)no-repeat 0 0 /32px 32px;

}

我

你

他

$(function(){

$("input[type='checkbox']").change(function(){

console.log($("input[type='checkbox']:checked").length);

})

})

单选

*{

padding:0;

margin:0;

}

input[type='radio']{

display: none;

}

label{

display: inline-block;

}

label input[type='radio']+span{

display: inline-block;

width: 32px;

height: 32px;

background: url(images/radio.png)no-repeat 0 0 /32px 32px;

}

label input[type='radio']:checked+span{

display: inline-block;

width: 32px;

height: 32px;

background: url(images/radio_checked.png)no-repeat 0 0 /32px 32px;

}

男

女

$(function(){

// console.log($("input[type='radio']:checked").length);

$("input[type='radio']").change(function(){

console.log($("input[type='radio']:checked").length);

})

})