2018年6月27日 更新

找到最为简单的仅仅使用css3的方案

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <style type="text/css">
 8     input[type="radio"]+label::before {
 9         content: "";
10         /*不换行空格*/
11         display: inline-block;
12         vertical-align: middle;
13         font-size: 18px;
14         width: 10px;
15         height: 10px;
16         margin-right: 10px;
17         border-radius: 50%;
18         border: 2px solid #01cd78;
19         text-indent: 15px;
20         line-height: 1;
21         padding: 4px;
22     }
23 
24     input[type="radio"]:checked+label::before {
25         background-color: #01cd78;
26         background-clip: content-box;
27     }
28 
29     input[type="radio"] {
30         position: absolute;
31         clip: rect(0, 0, 0, 0);
32     }
33     </style>
34 </head>
35 
36 <body>
37     <div class="female">
38         <input type="radio" id="female" name="sex" checked="" />
39         <label for="female">女</label>
40     </div>
41     <div class="male">
42         <input type="radio" id="male" name="sex" />
43         <label for="male">男</label>
44     </div>
45 </body>
46 
47 </html>
View Code

相关文章: