话不多说先上图
默认效果：
自定义效果：
上代码
HTML
<!DOCTYPE html> <html> <head> <title>radio test</title> </head> <body> <div style="position:relative;"> <span style="font-weight: bold;">性别：</span> <input type="radio" id="radio1" class="my-radio" name="radioTest" /> <label class="radio-label" for="radio1">男</label> <input type="radio" id="radio2" class="my-radio" name="radioTest" /> <label class="radio-label" for="radio2">女</label> <input type="radio" id="radio3" class="my-radio" name="radioTest" /> <label class="radio-label" for="radio3">妖</label> </div> </body> </html>
CSS
.my-radio {
position: relative;
z-index: 1;
}
.my-radio:checked::after {
content: ‘‘;
}
.my-radio::before {
content: ‘‘;
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #0084FF;
}
.my-radio::after {
position: absolute;
top: 4px;
left: 4px;
background-color: #0084FF;
width: 8px;
height: 8px;
border-radius: 50%;
}
.radio-label {
font-size: 14px;
display: inline-block;
}END.
原文：https://www.cnblogs.com/swcffgh/p/14160422.html