自定义单选框,复选框样式 

 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;

posted @ 2020-02-26 09:31  杵臼  阅读(391)  评论(0)  编辑  收藏  举报