您现在的位置是:网站首页> 编程资料编程资料
使用CSS3编写类似iOS中的复选框及带开关的按钮纯CSS3代码实现switch滑动开关按钮效果 纯css实现一款仿ios7的switches开关按钮一款非常酷的CSS3 3D左右滑动开关按钮CSS3实现的滑杆开关切换按钮动画非常酷的CSS33D发光开关切换按钮CSS开关按钮样式详解
2021-09-05
825人已围观
简介 这篇文章主要介绍了使用CSS3编写类似iOS中的复选框及带开关的按钮,需要的朋友可以参考下
checkbox多选
最近写了一个适合移动端的checkbox,如图:
ps:中间的勾勾是iconfont,iOS风格的。
具体的HTML:
XML/HTML Code复制内容到剪贴板
- <div class="mui-checkbox-con">
- <label>
- <input class="mui-checkbox" type="checkbox">默认未选中label>
- div>
- <div class="mui-checkbox-con">
- <label>
- <input class="mui-checkbox" type="checkbox" checked>默认选中label>
- div>
- <div class="mui-checkbox-con">
- <label>
- <input class="mui-checkbox checkbox-orange" type="checkbox" checked>橘黄色 checkbox-orangelabel>
- div>
- <div class="mui-checkbox-con">
- <label>
- <input class="mui-checkbox checkbox-green" type="checkbox" checked>绿色 checkbox-greenlabel>
- div>
- <div class="mui-checkbox-con">
- <label>
- <input class="mui-checkbox" type="checkbox" disabled>禁用label>
- div>
CSS代码(SCSS导出的,排版有些奇怪):
CSS Code复制内容到剪贴板
- .mui-checkbox {
- -webkit-appearance: none;
- position: relative;
- width: 25px;
- height: 25px;
- margin-right: 10px;
- background-color: #FFFFFF;
- border: solid 1px #d9d9d9;
- border-top-left-radius: 20px;
- border-top-rightright-radius: 20px;
- border-bottom-left-radius: 20px;
- border-bottom-rightright-radius: 20px;
- background-clip: padding-box;
- display: inline-block; }
- .mui-checkbox:focus {
- outline: 0 none;
- outline-offset: -2px; }
- .mui-checkbox:checked {
- background-color: #18b4ed;
- border: solid 1px #FFFFFF; }
- .mui-checkbox:checked:before {
- display: inline-block;
- margin-top: 1px;
- margin-left: 2px;
- font-family: iconfont;
- content: "\e667";
- color: #FFFFFF;
- font-size: 18px; }
- .mui-checkbox:disabled {
- background-color: #d9d9d9;
- border: solid 1px #d9d9d9; }
- .mui-checkbox:disabled:before {
- display: inline-block;
- margin-top: 1px;
- margin-left: 2px;
- font-family: iconfont;
- content: "\e667";
- color: #FFFFFF;
- font-size: 18px; }
- .mui-checkbox.checkbox-green:checked {
- background-color: #5cb85c; }
- .mui-checkbox.checkbox-orange:checked {
- background-color: #f0ad4e; }
- .mui-checkbox.checkbox-s {
- width: 19px;
- height: 19px; }
- .mui-checkbox.checkbox-s:before {
- display: inline-block;
- margin-top: 1px;
- margin-left: 2px;
- font-family: iconfont;
- content: "\e667";
- color: #FFFFFF;
- font-size: 13px; }
- .mui-checkbox-anim {
- -webkit-transition: background-color ease 0.2s;
-
相关内容
- 详解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学院整理
- 基础的CSS3弹性盒Flexbox布局使用实例10分钟理解CSS3 FlexBox弹性布局CSS3 Flex 弹性布局实例代码详解css flex 弹性布局详解实例讲解CSS3中的box-flex弹性盒属性布局CSS3弹性盒模型flex box快速入门心得(必看篇)flex弹性盒布局最后一行左对齐的实现思路
- CSS3的Flexbox布局的简明入门指南利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS3的Flexbox骰子布局的实现及问题讲解基础的CSS3弹性盒Flexbox布局使用实例css3弹性盒模型(Flexbox)详细介绍CSS3 Flexbox中flex-shrink属性的用法示例介绍10分钟理解CSS3 FlexBox弹性布局
- 深入剖析CSS变形transform(3d)纯CSS3绘制的中国联通动态logo图标样式源码使用CSS3编写类似iOS中的复选框及带开关的按钮详解CSS的Sass框架中代码注释的编写方法详解CSS中的flex容器与flex属性基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南CSS3实现的页面加载中动画过度特效源码纯CSS3简单的滑动开关按钮特效源码HTML5+CSS3图片堆叠转瀑布流布局特效源码CSS制作图形变形弹出效果的示例分享
- CSS制作图形变形弹出效果的示例分享纯CSS3绘制的中国联通动态logo图标样式源码使用CSS3编写类似iOS中的复选框及带开关的按钮详解CSS的Sass框架中代码注释的编写方法详解CSS中的flex容器与flex属性基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南深入剖析CSS变形transform(3d)CSS3实现的页面加载中动画过度特效源码纯CSS3简单的滑动开关按钮特效源码HTML5+CSS3图片堆叠转瀑布流布局特效源码
- 使用Loader.css和css-spinners来制作加载动画的方法css 命名:BEM, scoped css, css modules 与 css-in-js详解CSS3制作ajax loader icon实现思路及代码在vue-cli中使用css-loader实现css module
- 使用CSS3设计地图上的雷达定位提示效果纯css3实现的地图位置标记动态显示效果源码html5+css3实现的世界地图区域划分效果源码CSS3地图动态实例代码(圆圈向外扩散)
- 简单掌握CSS3中resize属性的用法CSS3的resize属性使用初探CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
- CSS裁剪属性clip使用的实例教程CSS中的clip-path区域裁剪属性使用教程浅谈css中的clip裁剪用法
- div+CSS制作类似微信对话气泡效果的实例总结DIV+CSS 清除浮动常用方法总结CSS教程之div垂直居中的多种方法关于div与>div的区别小结Divxdra1031.Dll图片溢出div问题的快速解决方法推荐如何让一个div居于页面正中间【实现方法】css三种方法实现div在浏览器水平居中一个div在浏览器水平居中的实现方法两个div叠加触发事件发生闪烁问题的解决方法
点击排行
本栏推荐
