使用CSS3编写类似iOS中的复选框及带开关的按钮


Posted in HTML / CSS onApril 11, 2016

checkbox多选

最近写了一个适合移动端的checkbox,如图:
使用CSS3编写类似iOS中的复选框及带开关的按钮

ps:中间的勾勾是iconfont,iOS风格的。

具体的HTML:

XML/HTML Code复制内容到剪贴板
  1. <div class="mui-checkbox-con">  
  2.     <label>  
  3.         <input class="mui-checkbox" type="checkbox">默认未选中</label>  
  4. </div>  
  5. <div class="mui-checkbox-con">  
  6.     <label>  
  7.         <input class="mui-checkbox" type="checkbox" checked>默认选中</label>  
  8. </div>  
  9. <div class="mui-checkbox-con">  
  10.     <label>  
  11.         <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orange</label>  
  12. </div>  
  13. <div class="mui-checkbox-con">  
  14.     <label>  
  15.         <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-green</label>  
  16. </div>  
  17. <div class="mui-checkbox-con">  
  18.     <label>  
  19.         <input class="mui-checkbox" type="checkbox" disabled>禁用</label>  
  20. </div>  

CSS代码(SCSS导出的,排版有些奇怪):

CSS Code复制内容到剪贴板
  1. .mui-checkbox {   
  2.   -webkit-appearance: none;   
  3.   positionrelative;   
  4.   width25px;   
  5.   height25px;   
  6.   margin-right10px;   
  7.   background-color#FFFFFF;   
  8.   bordersolid 1px #d9d9d9;   
  9.   border-top-left-radius: 20px;   
  10.   border-top-rightright-radius: 20px;   
  11.   border-bottom-left-radius: 20px;   
  12.   border-bottom-rightright-radius: 20px;   
  13.   background-clippadding-box;   
  14.   displayinline-block; }   
  15.   .mui-checkbox:focus {   
  16.     outline: 0 none;   
  17.     outline-offset: -2px; }   
  18.   .mui-checkbox:checked {   
  19.     background-color#18b4ed;   
  20.     bordersolid 1px #FFFFFF; }   
  21.     .mui-checkbox:checked:before {   
  22.       displayinline-block;   
  23.       margin-top1px;   
  24.       margin-left2px;   
  25.       font-family: iconfont;   
  26.       content"\e667";   
  27.       color#FFFFFF;   
  28.       font-size18px; }   
  29.   .mui-checkbox:disabled {   
  30.     background-color#d9d9d9;   
  31.     bordersolid 1px #d9d9d9; }   
  32.     .mui-checkbox:disabled:before {   
  33.       displayinline-block;   
  34.       margin-top1px;   
  35.       margin-left2px;   
  36.       font-family: iconfont;   
  37.       content"\e667";   
  38.       color#FFFFFF;   
  39.       font-size18px; }   
  40.   .mui-checkbox.checkbox-green:checked {   
  41.     background-color#5cb85c; }   
  42.   .mui-checkbox.checkbox-orange:checked {   
  43.     background-color#f0ad4e; }   
  44.   .mui-checkbox.checkbox-s {   
  45.     width19px;   
  46.     height19px; }   
  47.     .mui-checkbox.checkbox-s:before {   
  48.       displayinline-block;   
  49.       margin-top1px;   
  50.       margin-left2px;   
  51.       font-family: iconfont;   
  52.       content"\e667";   
  53.       color#FFFFFF;   
  54.       font-size13px; }   
  55.     
  56. .mui-checkbox-anim {   
  57.   -webkit-transition: background-color ease 0.2s;   
  58.           transition: background-color ease 0.2s; }  

SCSS代码:

CSS Code复制内容到剪贴板
  1. @mixin checkedCon($fs:18px) {   
  2.   &:before {   
  3.     displayinline-block;   
  4.     margin-top1px;   
  5.     margin-left2px;   
  6.     font-family: iconfont;   
  7.     content"\e667";   
  8.     color#FFFFFF;   
  9.     font-size: $fs;   
  10.   }   
  11. }   
  12. $duration: .4s;   
  13. .mui-checkbox {   
  14.   -webkit-appearance: none;   
  15.   positionrelative;   
  16.   width25px;   
  17.   height25px;   
  18.   margin-right10px;   
  19.   background-color#FFFFFF;   
  20.   bordersolid 1px #d9d9d9;   
  21.   border-top-left-radius: 20px;   
  22.   border-top-rightright-radius: 20px;   
  23.   border-bottom-left-radius: 20px;   
  24.   border-bottom-rightright-radius: 20px;   
  25.   background-clippadding-box;   
  26.   displayinline-block;   
  27.   &:focus {   
  28.     outline: 0 none;   
  29.     outline-offset: -2px  
  30.   }   
  31.   &:checked {   
  32.     background-color#18b4ed;   
  33.     bordersolid 1px #FFFFFF;   
  34.     @include checkedCon();   
  35.   }   
  36.   &:disabled {   
  37.     background-color#d9d9d9;   
  38.     bordersolid 1px #d9d9d9;   
  39.     @include checkedCon();   
  40.   }   
  41.   &.checkbox-green:checked {   
  42.     background-color#5cb85c;   
  43.   }   
  44.   &.checkbox-orange:checked {   
  45.     background-color#f0ad4e;   
  46.   }   
  47.   &.checkbox-s {   
  48.     width19px;   
  49.     height19px;   
  50.     @include checkedCon(13px);   
  51.   }   
  52. }   
  53.     
  54. .mui-checkbox-anim{   
  55.   //border等其他元素不做过渡效果,增加视觉差,更有动画效果   
  56.   transition: background-color ease $duration/2;   
  57.     
  58. }  

 
带switch开关
本身我做这一个ui的目的是支持移动端的页面,而webkit上也正好支持单标记的input元素是使用伪类(:before或:after),所以我没做更多的支持和优化,我只是想尽量的保持html干净,所以没用其他元素做模拟。如果你要使用在桌面应用上,或支持其他浏览器,可以自己稍微修改一下,反正我是没测试过。

今天继续分享一个iOS风格的switch开关按钮,样子也非常常见,如图:
使用CSS3编写类似iOS中的复选框及带开关的按钮

主要是使用了<input  type="checkbox">来模拟实现,具体的HTML:

XML/HTML Code复制内容到剪贴板
  1. <label><input class="mui-switch" type="checkbox"> 默认未选中</label>  
  2. <label><input class="mui-switch" type="checkbox" checked> 默认选中</label>  
  3. <label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>  
  4. <label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>  
  5. <label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中,过渡效果,加 mui-switch-anim   
  6. 类即可</label>  
  7. <label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>  

在实际的使用中后来又增加了两个过渡效果,分别加 mui-switch-animbg和mui-switch-anim 类即可,具体效果查看下面的demo页面。

CSS代码(SCSS导出的,排版有些奇怪):

CSS Code复制内容到剪贴板
  1. .mui-switch {   
  2.   width52px;   
  3.   height31px;   
  4.   positionrelative;   
  5.   border1px solid #dfdfdf;   
  6.   background-color#fdfdfd;   
  7.   box-shadow: #dfdfdf 0 0 0 0 inset;   
  8.   border-radius: 20px;   
  9.   border-top-left-radius: 20px;   
  10.   border-top-rightright-radius: 20px;   
  11.   border-bottom-left-radius: 20px;   
  12.   border-bottom-rightright-radius: 20px;   
  13.   background-clipcontent-box;   
  14.   displayinline-block;   
  15.   -webkit-appearance: none;   
  16.   user-select: none;   
  17.   outlinenone; }   
  18.   .mui-switch:before {   
  19.     content'';   
  20.     width29px;   
  21.     height29px;   
  22.     positionabsolute;   
  23.     top0px;   
  24.     left: 0;   
  25.     border-radius: 20px;   
  26.     border-top-left-radius: 20px;   
  27.     border-top-rightright-radius: 20px;   
  28.     border-bottom-left-radius: 20px;   
  29.     border-bottom-rightright-radius: 20px;   
  30.     background-color#fff;   
  31.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }   
  32.   .mui-switch:checked {   
  33.     border-color#64bd63;   
  34.     box-shadow: #64bd63 0 0 0 16px inset;   
  35.     background-color#64bd63; }   
  36.     .mui-switch:checked:before {   
  37.       left21px; }   
  38.   .mui-switch.mui-switch-animbg {   
  39.     transition: background-color ease 0.4s; }   
  40.     .mui-switch.mui-switch-animbg:before {   
  41.       transition: left 0.3s; }   
  42.     .mui-switch.mui-switch-animbg:checked {   
  43.       box-shadow: #dfdfdf 0 0 0 0 inset;   
  44.       background-color#64bd63;   
  45.       transition: border-color 0.4s, background-color ease 0.4s; }   
  46.       .mui-switch.mui-switch-animbg:checked:before {   
  47.         transition: left 0.3s; }   
  48.   .mui-switch.mui-switch-anim {   
  49.     transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; }   
  50.     .mui-switch.mui-switch-anim:before {   
  51.       transition: left 0.3s; }   
  52.     .mui-switch.mui-switch-anim:checked {   
  53.       box-shadow: #64bd63 0 0 0 16px inset;   
  54.       background-color#64bd63;   
  55.       transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }   
  56.       .mui-switch.mui-switch-anim:checked:before {   
  57.         transition: left 0.3s; }   
  58.     
  59. /*# sourceMappingURL=mui-switch.css.map */  

SCSS代码:

CSS Code复制内容到剪贴板
  1. @mixin borderRadius($radius:20px) {   
  2.   border-radius: $radius;   
  3.   border-top-left-radius: $radius;   
  4.   border-top-rightright-radius: $radius;   
  5.   border-bottom-left-radius: $radius;   
  6.   border-bottom-rightright-radius: $radius;   
  7. }   
  8.     
  9. $duration: .4s;   
  10. $checkedColor: #64bd63;   
  11. .mui-switch {   
  12.   width52px;   
  13.   height31px;   
  14.   positionrelative;   
  15.   border1px solid #dfdfdf;   
  16.   background-color#fdfdfd;   
  17.   box-shadow: #dfdfdf 0 0 0 0 inset;   
  18.   @include borderRadius();   
  19.   background-clipcontent-box;   
  20.   displayinline-block;   
  21.   -webkit-appearance: none;   
  22.   user-select: none;   
  23.   outlinenone;   
  24.   &:before {   
  25.     content'';   
  26.     width29px;   
  27.     height29px;   
  28.     positionabsolute;   
  29.     top0px;   
  30.     left: 0;   
  31.     @include borderRadius();   
  32.     background-color#fff;   
  33.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);   
  34.   }   
  35.   &:checked {   
  36.     border-color: $checkedColor;   
  37.     box-shadow: $checkedColor 0 0 0 16px inset;   
  38.     background-color: $checkedColor;   
  39.     &:before {   
  40.       left21px;   
  41.     }   
  42.   }   
  43.   &.mui-switch-animbg {   
  44.     transition: background-color ease $duration;   
  45.     &:before {   
  46.       transition: left 0.3s;   
  47.     }   
  48.     &:checked {   
  49.       box-shadow: #dfdfdf 0 0 0 0 inset;   
  50.       background-color: $checkedColor;   
  51.       transition: border-color $duration, background-color ease $duration;   
  52.       &:before {   
  53.         transition: left 0.3s;   
  54.       }   
  55.     }   
  56.     
  57.   }   
  58.   &.mui-switch-anim {   
  59.     transition: border cubic-bezier(0, 0, 0, 1) $duration, box-shadow cubic-bezier(0, 0, 0, 1) $duration;   
  60.     &:before {   
  61.       transition: left 0.3s;   
  62.     }   
  63.     &:checked {   
  64.       box-shadow: $checkedColor 0 0 0 16px inset;   
  65.       background-color: $checkedColor;   
  66.       transition: border ease $duration, box-shadow ease $duration, background-color ease $duration*3;   
  67.       &:before {   
  68.         transition: left 0.3s;   
  69.       }   
  70.     }   
  71.     
  72.   }   
  73. }  
HTML / CSS 相关文章推荐
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 #HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 #HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 #HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 #HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 #HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 #HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 #HTML / CSS
You might like
PHP的面试题集
2006/11/19 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
javascript从image转换为base64位编码的String
2014/07/29 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Django中对数据查询结果进行排序的方法
2015/07/17 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
python求最大连续子数组的和
2018/07/07 Python
python使用列表的最佳方案
2020/08/12 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
法定代表人资格证明书
2014/09/11 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
辞职信怎么写?
2019/05/21 职场文书