希望把自己以前困惑的内容写出来，如果能帮助到你，我为此感到开心，谢谢。
直接进入主题，怎样自定义radio的样式？
首先新建一个空白文档，写一个性别选择的单选框,简单初始化样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width">
<title>单选框样式</title>
<style>
*{margin: 0;padding: 0}
body{margin: 20% auto 0 5%}
</style>
</head>
<body>
<!--label for 属性 规定label绑定的表单元素-->
<div>请选择性别：</div><br>
<label for="male"><input type="radio" name="sex" id="male" value="male">Male</label>
<br>
<label for="female"><input type="radio" name="sex" id="female" value="female">Female</label>
</body>
</html>
备注：
当input标签外加入<label></label>标签并添加 label 的 for 属性与input的ID值一致时，点击label中的文字，可以选中radio
不然只能点击input才能选中这个单选框
大家可以根据自己项目的需求，选择合适的写法，有疑问赶紧写代码验证打假...
接着看一下浏览器的显示效果，浏览器会展示一个默认的radio显示，如图所示谷歌浏览器效果
思路：
1、首先知道input radio 的默认样式是在input上
2、添加input选中和不选中的样式
input[type="radio"][name="sex"]{width: 20px;height: 20px;border: 1px solid #ddd;position: absolute;box-sizing: border-box;left: 0}
input[type="radio"][name="sex"]:checked{width: 20px;height: 20px;border: 1px solid #ff0000;position: absolute;box-sizing: border-box}
3、样式有了但是应该添加到哪个元素上的，现在我们可以在页面中插入一对标签<span></span>,将样式移植到span上
<label for="male"><input type="radio" name="sex" id="male" value="male"><span></span>Male</label>
input[type="radio"][name="sex"] + span{width: 20px;height: 20px;border: 1px solid #ddd;position: absolute;box-sizing: border-box;left: 0}
input[type="radio"][name="sex"]:checked + span{width: 20px;height: 20px;border: 1px solid #ff0000;position: absolute;box-sizing: border-box}
4、将原来的radio(input)样式隐藏掉
5、效果是不是好了呢？
效果图：
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width">
<title>单选框样式</title>
<style>
*{margin: 0;padding: 0}
body{margin: 20% auto 0 5%}
label{position: relative;}
input[type="radio"][name="sex"]{opacity: 1;margin-right: 15px;}
input[type="radio"][name="sex"] + span{width: 20px;height: 20px;border: 1px solid #ddd;position: absolute;box-sizing: border-box;left: 0}
input[type="radio"][name="sex"]:checked + span{width: 20px;height: 20px;border: 1px solid #ff0000;position: absolute;box-sizing: border-box}
</style>
</head>
<body>
<!--label for 属性 规定label绑定的表单元素-->
<div>请选择性别：</div><br>
<label for="male"><input type="radio" name="sex" id="male" value="male"><span></span>Male</label>
<br>
<label for="female"><input type="radio" name="sex" id="female" value="female"><span></span>Female</label>
</body>
</html>
以上只是一种定义样式的方式，大家可以尝试不同的写法，比如选中、未选中状态可以替换成背景，背景图片等等或者继续美化一下样式；
<label for="male">
<input type="radio" name="sex" id="male" value="male">
<span></span>
Male
</label>
是不是还有其他的结构方式，可以都尝试一下。
书上得来终觉浅绝知此事要躬行，马上动起手来写一组单选框、多选框的样式吧，让我们的页面美美哒！
不足、错误之处望指出，谢谢！
