有时候大家需要美化单选框radio和多选框checkbox，由于原生的样式比较丑陋，而且表现不统一。CSS3之前通常用js来模拟，而现在完全可以用纯CSS达成radio和checkbox的美化。对于手机端非常早就写过有关的模拟样式：一个合适手机端的checkbox和css3达成的switch开关按钮。这两篇文章仅仅支持手机端的页面，而webkit上也正好支持单标记的input元素是用伪类（：before或：after）。近期做PC端项目，考虑到兼容更多的PC浏览器，所以在这基础上作了一些改进。

　　先来看看成效：

　　微信截图_20181127160857.png

　　再来看一下HTML结构：

　　html代码：

　　<labelclass="bui-radios-labelbui-radios-anim">

　　<inputtype="radio"name="sex"/><iclass="bui-radios"></i>男

　　</label>

　　这个结构有一个label标签，其中包括input元素和i元素。基本的原理是：第一用visibility:hidden;opacity:0;将input元素“隐藏”起来，借助label标签的特质，在点击时将input元素选中或取消选中。i元素结合伪类（：before或：after）模拟单选框radio和多选框checkbox的外观。

　　最后看看CSS代码：

　　css代码：

　　

　　

　　/*radio*/

　　label.bui-radios-labelinput{

　　position:absolute;

　　opacity:0;

　　visibility:hidden;

　　}

　　label.bui-radios-label.bui-radios{

　　display:inline-block;

　　position:relative;

　　width:13px;

　　height:13px;

　　background:#FFFFFF;

　　border:1pxsolid#979797;

　　border-radius:50%;

　　vertical-align:-2px;

　　}

　　label.bui-radios-labelinput:checked+.bui-radios:after{

　　position:absolute;

　　content:"";

　　width:7px;

　　height:7px;

　　background-color:#fff;

　　border-radius:50%;

　　TOP:3px;

　　left:3px;

　　}

　　label.bui-radios-labelinput:checked+.bui-radios{

　　background:#00B066;

　　border:1pxsolid#00B066;

　　}

　　label.bui-radios-labelinput:disabled+.bui-radios{

　　background-color:#e8e8e8;

　　border:solid1px#979797;

　　}

　　label.bui-radios-labelinput:disabled:checked+.bui-radios:after{

　　background-color:#c1c1c1;

　　}

　　label.bui-radios-label.bui-radios-anim.bui-radios{

　　-webkit-transition:background-colorease-out.3s;

　　transition:background-colorease-out.3s;

　　}

　　这里有几个方面需要说明的是：

　　1.checkbox中的勾勾用了iconfont，当然你可以改下图片，或用伪类（：before或：after）模拟。

　　2.添加了一些容易的过渡成效或背景动画。

　　3.特别要紧的一点是：借助label标签的特质，对于HTML基础不好同学来讲，请先认识一下label标签的特质。

本文转载自中文网

希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！