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>
4、书写css代码。
*{
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;
}
5、书写并添加js代码。<script src="js/input.js"></script>
6、代码整体结构。
7、查看效果。
