修改radio按钮样式的方法
单纯的修改radio按钮的border background-color 的属性是无法修改radio按钮的样式的。
原理：
把原先的input按钮隐藏掉，通过伪元素，在label标签前画一个自定义的图案，比如圆形。 再把label和input元素通过for属性和id属性绑定在一起，再添加input:checked效果，即可完成美化按钮。具体步骤如下：
选项一label>
选项二label>body>
此时效果如下：
1.第一步：通过伪元素 画出label前的图案label{
position: relative;
margin: 0 20px;
}
label::before{
position: absolute;
left: -20px;
width: 16px;
height: 16px;
border: 1px solid #399bfd;
border-radius: 50%;
content: ""; b
ox-sizing: border-box;}
2.第二步：通过input元素伪类checked添加点击效果input:checked+label::before{
background-color: white;
border: 5px solid #399bfd;}
此时点击input的radio按钮，发现我们自己画的图形也会发生改变了。 但是直接点击我们的图形是没有任何效果的。
3.第三步：通过for与id属性绑定input和label
选项一label>
选项二label>
body>
只需要将input的id属性与label的item属性一一对应起来就可以了。
此时可以通过点击label使我们的自定义按钮发生变化了。
最后一步：
隐藏input按钮input[type="radio"]{
display: none;
}
大功告成！
