我们可以用个简单的span标签（当然你也可以用其他标签）来模拟原生的单选框，大概原理就是，先使用label标签将原生单选框、用于模拟单选框的span标签以及文字包起来，并将原生单选框隐藏，然后再使用:checked伪类和+选择器来给span标签加选中样式。上面GIF图中美化单选框的具体代码如下：
作者：前端王睿
链接：https://www.jianshu.com/p/9f5ec459f893
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
/*label {
float: left;
margin-right: 10px;
overflow: hidden;
position: relative;
}
label input {
float: left;
position: absolute;
left: -50px;
right: -50px;
}
label span {
/*display: block;
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
}
input:checked~span {
background-color: #1C7ED6;
}*/
p {
display: inline-block;
}
label {
position: relative;
padding: 0 10px 0 25px;
cursor: pointer;
}
label input {
display: none;
}
label span {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 16px;
height: 16px;
margin: auto;
border: 1px solid #ccc;
border-radius: 100%;
}
label span:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 6px;
height: 6px;
margin: auto;
border-radius: 100%;
background: #fff;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all .3s;
transition: all .3s;
}
label input:checked+span {
border-color: #1db0fc;
background: #1db0fc;
}
label input:checked+span:after {
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<!--<label>
<input type="radio" name="tab"/>
<span></span>
</label>
<label>
<input type="radio" name="tab"/>
<span></span>
</label>
<label>
<input type="radio" name="tab"/>
<span></span>
</label>-->
<div class="form-group">
<p>性别：</p>
<label><input name="sex" type="radio" checked /><span></span>男</label>
<label><input name="sex" type="radio" /><span></span>女</label>
</div>
</body>
</html>
以上代码可能有几个地方需要解释一下：
① label标签可以将文字和表单控件绑定在一起，当你点击其中的文字时，与之绑定的表单控件将会相应获取焦点（单选框与复选框是选中该选项）；
② :checked伪类选择器是用于筛选被选中的单选框或复选框，需要注意的是，该选择器最低只兼容到IE9；
③ +选择器是用于筛选紧邻其后的兄弟元素，比如示例代码中就是筛选被选中的单选框之后紧邻的span元素。既然这里提到了，就再简单地说说与之相似的~选择器，该选择器是用于筛选其后的所有兄弟元素，这两个选择器可能平时用得比较少，但是有时候用处还是挺大的。
好了，以上就是使用纯CSS来模拟实现单选框的美化，当然复选框的美化原理其实是一样的，这里就不再赘述了。
作者：前端王睿
链接：https://www.jianshu.com/p/9f5ec459f893
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。