html+css3+jQuery实现美化单选按钮复选框
1、准良巨备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<center>
<form>
单选框
<lable> <i class='input_style radio_bg'>
<input type="radio" name="hot" value="1">
</i> a1 </lable>
<lable> <i class='input_style radio_bg'>
<input type="radio" name="hot" value="2">
</i> a2 </lable>
<lable> <i class='input_style radio_bg'>冲况艳
<input type="radio" name="hot" value="3">
</i> a3 </lable>
<lable> <i class='input_style radio_bg'>
<input type="radio" name="hot" value="4">
</i> a4 </lable>
<lable> <i class='input_style radio_bg'>
<input type="radio" name="hot" value="5">
</i> a5 </lable>
复选框
<lable> <i class='input_style checkbox_bg'>
<input type="checkbox" name="q" value="11">
</i> b1 </lable>
<lable> <i class='input_style checkbox_bg'>
<input type="checkbox" name="w" value="22">
</i> b2 </lable>
<lable> <i class='input_style checkbox_bg'>
<input type="checkbox" name="e" value="33">
</i> b3 </lable>
毙互 <lable> <i class='input_style checkbox_bg'>
<input type="checkbox" name="r" value="44">
</i> b4 </lable>
<input type="submit" value="提交">
</form>
</center>
4、书写css代码。
<style>
body { padding: 20px }
* { padding: 0; margin-left: 0; }
input[type='radio'], input[type='checkbox'] { width: 20px; height: 20px; vertical-align: middle; opacity: 0; }
.input_style { background: url(image/green.png) no-repeat; width: 20px; height: 20px; display: inline-block; }
.radio_bg { background-position: -118px 0; }
.checkbox_bg { background-position: 0 0; }
.radio_bg_check { background-position: -166px 0; }
.checkbox_bg_check { background-position: -48px 0; }
</style>
5、添加js代码。<script src="js/jquery-1.8.3.min.js"></script>
书写 <script src="js/input.js"></script>
<script>
;(function($){
$.extend({
inputStyle:function(){
function check(el,cl){
$(el).each(function(){
$(this).parent('i').removeClass(cl);
var checked = $(this).prop('checked');
if(checked){
$(this).parent('i').addClass(cl);
}
})
}
$('input[type="radio"]').on('click',function(){
check('input[type="radio"]','radio_bg_check');
})
$('input[type="checkbox"]').on('click',function(){
check('input[type="checkbox"]','checkbox_bg_check');
})
}
})
})(jQuery)
//调用
$(function(){
$.inputStyle();
})
</script>
6、代码整体结构。
7、查看效果。
