今天教大家一下学以致用的东西吧，摸索中进步，没经过美化的单选框按钮是这样的
image.png
那么经过美化的呢是这样的
image.png
想不想知道这样的美化怎么做出来的呢？一起来看看吧！
在body里写上内容
<body>
<input type="radio" id="" name="" value="1"><label for="radios1">我是radio1</label>
<input type="radio" id="" name="" value="2"><label for="radios2">我是radio2</label>
</body>
在样式里，首先将原始的单选框状态清除掉
input[type="radio"] {
position: relative;
width: 18px;
height: 18px;
outline: none;
vertical-align: bottom;
}
第二、通过伪类的方式来模拟单选框
input[type="radio"]:before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 1px solid #999;
border-radius: 50%;
}
第三、用伪类before来定义选中时的背景和边框
input[type="radio"]:checked:before {
border: 1px solid transparent;
background-color: #5ECD62;
}
第四、用伪类after来定义选中时的圆圈
input[type="radio"]:checked:after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border: 2px solid #fff;
border-radius: 50%;
}
这样美美的单选框按钮就做出来啦！
