html多选框 单选按钮,如何利用用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮...

很多时候我们需要美化单选框radio和多选框checkbox，因为原生的样式比较丑陋，而且表现不统一。CSS3之前一般用js来模拟，而如今完全可以用纯CSS实现radio和checkbox的美化。对于移动端很早就写过相关的模拟样式：一个适合移动端的checkbox和css3实现的switch开关按钮。这两篇文章仅仅支持移动端的页面，而webkit上也正好支持单标记的input元素是使用伪类(：before或：after)。最近做PC端项目，考虑到兼容更多的PC浏览器，所以在这基础上作了一些改进。

先来看看效果：

微信截图_20181127160857.png

再来看一下HTML结构：

html代码：

男

这个结构有一个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标签的特性。

本文转载自中文网