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>

4、书写css代码。*{ padding: 0; margin-left: 0;}input[type=&垆杪屑丝#39;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;}

5、书写并添加js代码。<script src="js/input.js"></script>

6、代码整体结构。

7、查看效果。