XHTMT HTML5 CSS HTML DOM
jQuery JSON AJAX LESS HTML Bootstrap Foundation AngularJS Ember.js TypeScript AngularJS2 React jQuery UI jQuery EasyUI Node.js Highcharts Echarts Vue.js CoffeeScript Ext.js Meteor SASS Omi Markdown 前端开发规范 浏览器 webpack JavaScript CSS3
用户登录
用户注册

分享至

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

  • 作者: 亖呉?盀
  • 来源: 51数据库
  • 2021-07-08

　　昨天为大家分享了一款很炫的checkbox复选框和radio单选框，今天再给大家带来一款简单实用的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-content: center;   
  8.             align-items: center;   
  9.         }   
  10.         form .frame   
  11.         {   
  12.             display: flex;   
  13.             flex-flow: row nowrap;   
  14.         }   
  15.         form .frame input   
  16.         {   
  17.             display: none;   
  18.         }   
  19.         form .frame label   
  20.         {   
  21.             cursor: pointer;   
  22.             position: relative;   
  23.             width: 30px;   
  24.             height: 30px;   
  25.             margin: 10px;   
  26.             background: #8aba56;   
  27.             transition: all 0.3s ease-in-out;   
  28.             font-size: 12pt;   
  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.             position: absolute;   
  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-height: 30px;   
  51.             text-align: center;   
  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按钮，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

推荐阅读
热点文章

Copyright 2018 51数据库(www.51sjk.com)

软件
前端设计
程序设计
Java相关