1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>自定义单选框,复选框样式</title> 6 </head> 7 <style> 8 * { 9 margin: 0; 10 padding: 0 11 } 12 div{ 13 position: relative; 14 margin: 100px auto; 15 width: 300px; 16 } 17 18 /* 单选框样式 */ 19 label input { 20 width: 10px; 21 height: 10px; 22 opacity: 0; 23 } 24 25 .spot { 26 display: inline-block; 27 width: 16px; 28 height: 16px; 29 background: url("../img/imange1.png") no-repeat; 30 /*默认的样式图片*/ 31 background-size: 16px; 32 position: relative; 33 z-index: 5; 34 top: .2rem; 35 } 36 37 input:checked+.spot { 38 width: 16px; 39 height: 16px; 40 background: url("../img/imange2.png") no-repeat; 41 /*选中后的样式图片*/ 42 background-size: 16px; 43 } 44 </style> 45 <body> 46 <!-- 单选框 --> 47 <div>单选框: 48 <label><input type="radio" name="sex" value="男生">男生<i class="spot"></i></label> 49 <label><input type="radio" name="sex" value="女生">女生<i class="spot"></i></label> 50 <label><input type="radio" name="sex" value="保密" checked="checked">保密<i class="spot"></i></label> 51 </div> 52 53 <!-- 复选框 --> 54 <div> 55 复选框: 56 <label><input type="checkbox" name="like" value="0">音乐<i class="spot"></i></label> 57 <label><input type="checkbox" name="like" value="1">旅游<i class="spot"></i></label> 58 <label><input type="checkbox" name="like" value="2">其他<i class="spot"></i></label> 59 </div> 60 61 </body> 62 </html>
1.改成自己的默认样式图片:background: url("../img/imange1.png") no-repeat;
2.改成自己的选中样式图片:background: url("../img/imange2.png") no-repeat;