前言
别人家表单单选框样式那么精美，而我们学习css时知道radio标签并没有特殊的属性设定样式，那别人是怎么做出来的？现有ui组件虽然能满足使用，但是难免那一天设计就想要她的设计效果啊，先提前准备一下。
一、怎么完成radio自定义样式？
那么复杂的样式，光靠修改属性可完成不了，所以只有自己写一个了。既然不好看就干脆隐藏，换上自己的元素
二、开始修改
先上个比对效果图
1. 准备骨架
默认的
<input id="genderman" type="radio" name="sex" value="man" />
<label for="genderman">男</label>
<input id="genderwoman" type="radio" name="sex" value="woman" />
<label for="genderwoman"> 女 </label>
<br />
<br />
自定义
<!-- 给个 hidden 隐藏得了 -->
<input id="man" type="radio" name="gender" value="1" hidden />
<!-- 当用户选择label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，索性不嵌套在一起了-->
<label class="label-radio" for="man">男</label>
<input id="woman" type="radio" name="gender" value="2" hidden />
<label class="label-radio" for="woman">女</label>
2. 修改样式
/*自己用伪元素自定义一个带高光的小球*/
/*这里简单处理了一下垂直居中对齐，若想要更好的效果，使用absolute更好*/
.label-radio:before {
display: inline-block;
content: "";
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background: radial-gradient(white, #444);
line-height: inherit;
}
.label {
line-height: 20px;
}
/* 单选框别选中时，使用伪类设置选中效果*/
input:checked + .label-radio:before {
background: radial-gradient(white, rgb(50, 50, 255));
}
/*加点鼠标进入状态提示，不同的明暗能更好地区分不同状态*/
input:hover + .label-radio:before {
background: radial-gradient(white, #666);
}
input:checked:hover + .label-radio:before {
background: radial-gradient(white, rgb(0, 0, 255));
}
总结
当简单的修改属性已经不能满足样式需求了，就只能另辟蹊径自己写。这里是一个简单的修改radio标签样式案例，隐藏默认的元素，直接换自定义的元素，用到:check伪类，label标签转移选中焦点的特性。能做到这里，想要更花的样式也是同样的方法，要是更复杂，咱也不怕直接用个背景图片， [](￣▽￣)* 。