自定义input单选框样式
表单中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);}
效果为：
