1.代码参考
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>radio的样式修改</title> 7 <style> 8 input[type=radio] { 9 display: none; 10 } 11 12 .radio { 13 display: inline-block; 14 width: 12px; 15 height: 12px; 16 background-color: purple; 17 padding: 2px; 18 border-radius: 50%; 19 position: relative; 20 margin-right: 8px; 21 top: 2px; 22 left: 8px; 23 } 24 25 .radio em { 26 display: inline-block; 27 width: 8px; 28 height: 8px; 29 background-color: pink; 30 border-radius: 50%; 31 position: absolute; 32 top: 4px; 33 left: 4px; 34 } 35 36 input[type=radio]:checked+.radio em { 37 background-color: skyblue; 38 } 39 </style> 40 </head> 41 42 <body> 43 44 <!-- 单选框 --> 45 <label> 46 <input type="radio" name="client"> 47 <span class="radio"> 48 <em></em> 49 </span> 50 选择 51 </label> 52 53 </body> 54 55 </html>
2.显示效果
(1)选中前
(2)选中后
