您现在的位置是：网站首页> 编程资料编程资料

使用CSS3编写类似iOS中的复选框及带开关的按钮纯CSS3代码实现switch滑动开关按钮效果 纯css实现一款仿ios7的switches开关按钮一款非常酷的CSS3 3D左右滑动开关按钮CSS3实现的滑杆开关切换按钮动画非常酷的CSS33D发光开关切换按钮CSS开关按钮样式详解

2021-09-05 823人已围观

简介 这篇文章主要介绍了使用CSS3编写类似iOS中的复选框及带开关的按钮,需要的朋友可以参考下

checkbox多选

最近写了一个适合移动端的checkbox，如图：
2016411114913458.png (812×522)

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-orangelabel>  
  12. div>  
  13. <div class="mui-checkbox-con">  
  14.     <label>  
  15.         <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-greenlabel>  
  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.   position: relative;   
  4.   width: 25px;   
  5.   height: 25px;   
  6.   margin-right: 10px;   
  7.   background-color: #FFFFFF;   
  8.   border: solid 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-clip: padding-box;   
  14.   display: inline-block; }   
  15.   .mui-checkbox:focus {   
  16.     outline: 0 none;   
  17.     outline-offset: -2px; }   
  18.   .mui-checkbox:checked {   
  19.     background-color: #18b4ed;   
  20.     border: solid 1px #FFFFFF; }   
  21.     .mui-checkbox:checked:before {   
  22.       display: inline-block;   
  23.       margin-top: 1px;   
  24.       margin-left: 2px;   
  25.       font-family: iconfont;   
  26.       content: "\e667";   
  27.       color: #FFFFFF;   
  28.       font-size: 18px; }   
  29.   .mui-checkbox:disabled {   
  30.     background-color: #d9d9d9;   
  31.     border: solid 1px #d9d9d9; }   
  32.     .mui-checkbox:disabled:before {   
  33.       display: inline-block;   
  34.       margin-top: 1px;   
  35.       margin-left: 2px;   
  36.       font-family: iconfont;   
  37.       content: "\e667";   
  38.       color: #FFFFFF;   
  39.       font-size: 18px; }   
  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.     width: 19px;   
  46.     height: 19px; }   
  47.     .mui-checkbox.checkbox-s:before {   
  48.       display: inline-block;   
  49.       margin-top: 1px;   
  50.       margin-left: 2px;   
  51.       font-family: iconfont;   
  52.       content: "\e667";   
  53.       color: #FFFFFF;   
  54.       font-size: 13px; }   
  55.     
  56. .mui-checkbox-anim {   
  57.   -webkit-transition: background-color ease 0.2s;   
  58.     &#

    上一篇：详解CSS的Sass框架中代码注释的编写方法前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范利用CSS的Sass预处理器（框架）来制作居中效果深入解析CSS的Sass框架中混合宏的使用CSS的Sass框架中常用的操作符的使用教程使用Sass来编写面向对象的CSS代码CSS框架sass的简单一览CSS的SASS样式编程指南CSS制作框架 Sass 3.4.4 今日发布 学习CSS预处理器:Sass和less进行对比sass简介_动力节点Java学院整理

    下一篇：一个div在浏览器水平居中的实现方法DIV+CSS 清除浮动常用方法总结CSS教程之div垂直居中的多种方法关于div与>div的区别小结Divxdra1031.Dll图片溢出div问题的快速解决方法推荐如何让一个div居于页面正中间【实现方法】css三种方法实现div在浏览器水平居中div+CSS制作类似微信对话气泡效果的实例总结两个div叠加触发事件发生闪烁问题的解决方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网