html+css3+jQuery实现美化单选按钮复选框
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<center><form> <p> 单选框 媪青怍牙<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> </p> <p> 复选框 <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> </p> <input type="submit" value="提交"></form></center>
4、书写css代码。<style>body { padding: 20px }* { padd足毂忍珩ing: 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、查看效果。
