html单选框默认样式比较单一，结合网上相关内容在此做个关于修改radio样式的记录。
html结构如下：
1、首先需要用“for”属性将 label 绑定到 input 元素上，即“for”属性的值要和绑定的 input 元素的 id 值相同。如果没有绑定，修改完样式之后点击单选框是无法选中的。（本人开始就犯了这个错误。）
2、接着将默认的单选框隐藏掉：
input[type="radio"] { position: absolute; clip: rect(0,0,0,0);}采用剪切的方式，让剪切后的尺寸为零，以此隐藏原来的单选框。
3、用伪元素作为新的单选框：
/* 未被选中的单选框样式 空心圆圈*/input[type="radio"] + label::before { content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 5px; box-sizing: border-box; border-radius: 50%; margin-bottom: 4px; border: 1px solid #bfcbd9;}/* 被选中的单选框样式 给空心圆圈中间加上背景色*/input[type="radio"]:checked + label::before{ background-color: #178fe6; background-clip: content-box; /* 规定背景颜色的绘制区域 */ padding: 2px;}/* 单选框文字的样式 */input[type="radio"] + label { font-size: 13px; margin-right: 5px;}最终效果：
参考：https://www.cnblogs.com/xinjie-just/p/7302020.html