一款纯css3实现简单的checkbox复选框和radio单选框


Posted in HTML / CSS onNovember 05, 2014

昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框。界面清淅、舒服。先给大家来张效果图:

一款纯css3实现简单的checkbox复选框和radio单选框

实现代码:

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="frame">  
  2.         <input checked="checked" id="radio_1" name="radio" type="radio">  
  3.         <label class="radio" for="radio_1">  
  4.             <i class="fa fa-times"></i>  
  5.         </label>  
  6.         <input id="radio_2" name="radio" type="radio">  
  7.         <label class="radio" for="radio_2">  
  8.             <i class="fa fa-times"></i>  
  9.         </label>  
  10.         <input id="radio_3" name="radio" type="radio">  
  11.         <label class="radio" for="radio_3">  
  12.             <i class="fa fa-times"></i>  
  13.         </label>  
  14.         <input id="radio_4" name="radio" type="radio">  
  15.         <label class="radio" for="radio_4">  
  16.             <i class="fa fa-times"></i>  
  17.         </label>  
  18.         <input id="radio_5" name="radio" type="radio">  
  19.         <label class="radio" for="radio_5">  
  20.             <i class="fa fa-times"></i>  
  21.         </label>  
  22.     </div>  
  23.     <div class="frame">  
  24.         <input checked="checked" id="check_1" name="check" type="checkbox">  
  25.         <label class="check" for="check_1">  
  26.             <i class="fa fa-check"></i>  
  27.         </label>  
  28.         <input id="check_2" name="check" type="checkbox">  
  29.         <label class="check" for="check_2">  
  30.             <i class="fa fa-check"></i>  
  31.         </label>  
  32.         <input id="check_3" name="check" type="checkbox">  
  33.         <label class="check" for="check_3">  
  34.             <i class="fa fa-check"></i>  
  35.         </label>  
  36.         <input id="check_4" name="check" type="checkbox">  
  37.         <label class="check" for="check_4">  
  38.             <i class="fa fa-check"></i>  
  39.         </label>  
  40.         <input id="check_5" name="check" type="checkbox">  
  41.         <label class="check" for="check_5">  
  42.             <i class="fa fa-check"></i>  
  43.         </label>  
  44.     </div>  

css3代码:

CSS Code复制内容到剪贴板
  1. form   
  2.         {   
  3.             width: 100vw;   
  4.             height: 100vh;   
  5.             display: flex;   
  6.             flex-flow: column wrap;   
  7.             justify-contentcenter;   
  8.             align-items: center;   
  9.         }   
  10.         form .frame   
  11.         {   
  12.             display: flex;   
  13.             flex-flow: row nowrap;   
  14.         }   
  15.         form .frame input   
  16.         {   
  17.             displaynone;   
  18.         }   
  19.         form .frame label   
  20.         {   
  21.             cursorpointer;   
  22.             positionrelative;   
  23.             width30px;   
  24.             height30px;   
  25.             margin10px;   
  26.             background#8ABA56;   
  27.             transition: all 0.3s ease-in-out;   
  28.             font-size12pt;   
  29.             color#FFF;   
  30.             -webkit-font-smoothing: antialiased;   
  31.         }   
  32.         form .frame label.radio   
  33.         {   
  34.             border-radius: 100%;   
  35.         }   
  36.         form .frame label.check   
  37.         {   
  38.             border-radius: 5px;   
  39.         }   
  40.         form .frame label .fa   
  41.         {   
  42.             positionabsolute;   
  43.             top: 0;   
  44.             left: 0;   
  45.             rightright: 0;   
  46.             bottombottom: 0;   
  47.             opacity: 0;   
  48.             -webkit-transform: scale(0);   
  49.             transition: all 0.3s ease-in-out;   
  50.             line-height30px;   
  51.             text-aligncenter;   
  52.         }   
  53.         form .frame input:checked + label   
  54.         {   
  55.             background#678b40;   
  56.         }   
  57.         form .frame input:checked + label .fa   
  58.         {   
  59.             opacity: 1;   
  60.             -webkit-transform: scale(1);   
  61.         }  

好了。复制上面的html代码和css代码。轻松搞定一款漂亮的checkbox、radio按钮,谢谢阅读,希望能帮到大家,请继续关注三水点靠木,我们会努力分享更多优秀的文章。

HTML / CSS 相关文章推荐
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 #HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 #HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 #HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 #HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 #HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 #HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 #HTML / CSS
You might like
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
js href的用法
2010/05/13 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
如何根据业务封装自己的功能组件
2019/04/19 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
详解Python if-elif-else知识点
2018/06/11 Python
解决Python一行输出不显示的问题
2018/12/03 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python3转换code128条形码的方法
2019/04/17 Python
python字符串查找函数的用法详解
2019/07/08 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
微观物理专业自荐信
2014/01/26 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
2015国庆节感想
2015/08/04 职场文书
企业法律事务工作总结
2015/08/11 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Mysql排序的特性详情
2021/11/01 MySQL