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>