欢迎光临十大正规赌博平台!

十大正规赌博平台个人网站-十大正规赌博平台个人博客-杨照佳

正规博彩十大公司

关注世界十大博彩公司的博客网站

首页 > WEB开发 > html5案例分享 >

用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮

发布时间:2018-05-10  编辑:正规博彩十大公司   点击:   

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

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

先来看看效果:

用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮

用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮

用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮

再来看一下HTML结构:

<label> <input type="radio"/><i></i> 男 </label>

这个结构有一个 label 标签,其中包含 input 元素和 i 元素。基本的原理是:首先使用 visibility: hidden; opacity: 0; 将 input 元素 “隐藏” 起来,利用 label 标签的特性,在点击时将 input 元素选中或取消选中。 i 元素结合伪类(:before或:after)模拟单选框 radio 和多选框 checkbox 的外观。

最后看看CSS代码:

/* radio */ label.bui-radios-label input { position: absolute; opacity: 0; visibility: hidden; } label.bui-radios-label .bui-radios { display: inline-block; position: relative; width: 13px; height: 13px; background: #FFFFFF; border: 1px solid #979797; border-radius: 50%; vertical-align: -2px; } label.bui-radios-label input:checked + .bui-radios:after { position: absolute; content: ""; width: 7px; height: 7px; background-color: #fff; border-radius: 50%; top: 3px; left: 3px; } label.bui-radios-label input:checked + .bui-radios { background: #00B066; border: 1px solid #00B066; } label.bui-radios-label input:disabled + .bui-radios { background-color: #e8e8e8; border: solid 1px #979797; } label.bui-radios-label input:disabled:checked + .bui-radios:after { background-color: #c1c1c1; } label.bui-radios-label.bui-radios-anim .bui-radios { -webkit-transition: background-color ease-out .3s; transition: background-color ease-out .3s; }

完整的单选框 radio ,多选框 checkbox 和 switch 开关 demo示例:

这里有几点需要说明的是:
1. checkbox 中的 勾勾使用了iconfont,当然你可以改下图片,或用伪类(:before或:after)模拟。
2. 添加了一些简单的过渡效果 或 背景动画。
3. 特别重要的一点是:利用 label 标签的特性,对于HTML基础不好同学来说,请先了解一下 label 标签的特性。

本文地址:/web/html5/18914.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1