自定义单选框

表单中input[type=“radio”]的样式在不同的浏览器中表现也不一样，如果直接对单选按钮设置样式的话，没有多少样式能够对单选按钮起作用。
为了用户体验或者需要更改单选按钮的样式可使用此方法：
一般使用单选按钮会搭配<label>元素使用并将关联起来，可以为<label>元素添加生成伪元素，并基于单选按钮的状态来为其设置样式，并将真正的按钮隐藏

1.一个基本的单选按钮

<div>
<input type="radio" id="girl" name="sex" />
<label for="girl">女</label>
<input type="radio" id="boy" name="sex" />
<label for="boy">男</label>
</div>
此时的样式

2.生成一个伪元素，设置自己想要的样式

<style>
input[type="radio"]+label::before {
content: "\a0";/*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 7px;
height: 7px;
margin: auto 5px;
border-radius: 50%;
border: 1px solid gray;
padding: 4px;
}
/* 设置选中样式 */
input[type="radio"]:checked+label::before {
background-color: gray;
background-clip: content-box;
padding: 4px;
}
</style>
添加以上代码后的样式

3.隐藏原来的单选按钮

input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
效果为：