<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<style>

body{

background:#eee;

}

.lbl{

/*复选框背景色*/

 height:20px;

 width:50px;

 display:block;/*元素将显示为块级元素*/

 background:#ddd;

 border-radius:20px;/*为元素添加圆角边框*/

 cursor:pointer;/*鼠标样式*/

 position:relative;/*相对定位*/

 transition:all 0.3s ease;/*平滑过渡效果*/

}

.cbx:checked ~ label{

/*设置选中的复选框的兄弟元素label的背景色*/

 background:#42d842;

}

.lbl:after{

 /*在元素的内容后面插入内容*/

 content:'';

 width:25px;

 height:25px;

 display:block;

 background:#fff;

 border-radius:25px;/*为元素添加圆角边框*/

 box-shadow:0px 3px 3px rgba(0,0,0,0.05);/*为元素设置阴影*/

 transition:all 0.3s ease;/*平滑过渡效果*/

 position:absolute;

/*绝对定位，父容器使用相对定位，子元素使用绝对定位后，

这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角*/

  /*调整元素位置*/

  left:-2px;

  top:-3px;

}

.cbx:checked ~ label:after{

  /*改变选中状态的复选框的兄弟元素label的圈圈位置*/

  left:25px;

  background:#fff;

}

.lbl:active:after{

  /*设置点击时候圈圈进行缩放动画*/

  transform:scale(2,0.8);

}

.hidden{

  /*隐藏复选框*/

  display:none;

}

.cbx:disabled ~ label{

  /*设置复选框禁用時候的兄弟元素label樣式*/

  background:#d5d5d5;

  pointer-events:none;/*阻止点击动作产生效果*/

}

.cbx:disabled ~ label:after{

  /*设置复选框禁用時候的兄弟元素label圈圈樣式*/

  background:#bcbdbc;

}

.check{

  /*设置元素的下边距*/

  margin-bottom:20px;

}

.content{

  width:100px;

  margin:100px auto;/*设置居中*/

}

</style>

</head>

<body>

<div class="content">

  <div class="check">

    <input type="checkbox" id="uncheckbox" class="cbx hidden" name="1" />

    <label for="uncheckbox" class="lbl"></label>

    <!--for 属性规定 label 与哪个表单元素绑定。-->

  </div>

  <!--再来一个禁用的复选框-->

  <div class="check">

    <input type="checkbox" id="discheckbox" class="cbx hidden" name="sb" disabled/>

    <label for="discheckbox" class="lbl"></label>

  </div>

  <!--再来一个选中状态的复选框-->

  <div class="check">

    <input type="checkbox" id="checkbox" class="cbx hidden" name="1" checked/>

    <label for="checkbox" class="lbl"></label>

  </div>

</div>

</body>

</html>

chrome浏览器效果图！   主流浏览器一切正常。除了ie8 以下不兼容。  万恶的IE之源 赶紧从中国消失吧。

使用CSS3制作酷炫防苹果复选框 自行测试！的更多相关文章

  1. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  2. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  3. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  4. jquery mobile 复选框和单选框

    checkbox 和radio <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  5. JavaScript：复选框事件的处理

    复选框事件的处理 复选框本身也是多个组件的名字相同.所以在定义复选框的同事依然要使用document.all()取得全部的内容. 范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮 ...

  6. excel添加复选框和去掉复选框

    添加复选框 我测试的excel版本是最新版2016,所有版本都是找开发者工具里面包含很多工具呢,大家可以慢慢测试 excel的右上角 点击文件-->选项-->自定义功能区-->添加开 ...

  7. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  8. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  9. 使用css3美化复选框

    声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...

随机推荐

  1. 深入了解Erlang 垃圾回收机制以及其重要性（转）

    声明:本片文章是由Hackernews上的[Erlang Garbage Collection Details and Why ItMatters][1]编译而来,本着学习和研究的态度,进行的编译,转 ...

  2. windows 和 linux 上 循环读取文件名称的区别和方法

    function showGetFileName($type){ $url="/opt/mobile_system/gscdn"; //另一台服务器映射到linux过来的路径. # ...

  3. java学习笔记之String.Split方法

    hello 大家好,好久不见,今天 我们要讨论的是java的split方法,或许你很早就知道了,但你真的知道吗? 我们来看看吧. 首先我们来看看我们最常用的split()方法也就是单个参数的方法 pu ...

  4. 贝塞尔曲线与CAShapeLayer的关系以及Stroke动画

    1.贝塞尔曲线与CAShapeLayer的关系    1.1CAShapeLayer须要一个形状才干生效,贝塞尔曲线能够创建基于矢量的路径.进而能够给CAShapeLayer提供路径,路径会闭环.   ...

  5. vptr

    #include <stdio.h> class Point3d { public: virtual ~Point3d(){} public: static Point3d origin; ...

  6. z-index随笔

    z-index这个css属性是用来控制层级的,但是它的表现有点奇怪,这里做下记录. 假如有ABC三层,都没设置z-index时,是按dom节点顺序来控制层级. 此时如果B元素下有个元素D,设置了z-i ...

  7. UITableView 右侧索引

    1.设置右侧索引字体颜色 self.tabView.sectionIndexColor = [UIColor blackColor]; 2.设置右侧索引背景色 self.cityTabView.sec ...

  8. swift 使用运行时进行属性关联

    1.用OC思想写swift代码真得很爽,swift需要的OC基本上都有,只不过略微改变了一下,例如以前的Foundation库前缀NS全部去掉了,等等...思想其实都一样,不过swift确实非常精简, ...

  9. ElasticSearch（十八）初识分词器

    1.什么是分词器 作用:切分词语,normalization(提升recall召回率),如给你一段句子,然后将这段句子拆分成一个一个的单个的单词,同时对每个单词进行normalization(时态转换 ...

  10. JVM类加载流程

    1.加载 a.装载类的第一个阶段 b.取得类的二进制流 c.转为方法区数据结构 d.在Java堆中生成对应的java.lang.Class对象 2.链接 a.验证(保证Class流的格式是正确的) 文 ...