<!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. 云中应用性能管理（APM）的下一步

    Michael Kopp是Compu-ware公司卓越APM中心的一名技术分析师,他做过10多年的Java/JEE领域的设计师和开发员.另外,Kopp还专攻虚拟和云的大规模生产部署的结构和性能. ? ...

  2. The Pilots Brothers' refrigerator - poj 2965

      Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20325   Accepted: 7830   Special Judg ...

  3. 如何在struts2中实现下载?

    <a href="${pageContext.request.contextPath}/download?filename="+filename>点击下载</a& ...

  4. mac虚拟机搭建自动化环境-wda和python wda client

    尽量升级Xcode到最新版,保持iPhone的版本大于9.3 1.安装webDriverAgent到ios真机 从github上下载代码:git clone https://github.com/fa ...

  5. Selenium 应用 WebDriverWait 和 expected_conditions（待验证）

    收藏在我的收藏看不到,只能copy了,转载至http://www.cnblogs.com/yicaifeitian/p/4749149.html 哈哈,我始终相信贴出来总会有人看.WebDriverW ...

  6. python selenium2示例 - email发送

    前言 在进行日常的自动化测试实践中,我们总是需要将测试过程中的记录.结果等等等相关信息通过自动的手段发送给相关人员.python的smtplib.email模块为我们提供了很好的email发送等功能的 ...

  7. Linux3_文件系统

    1.Linux发行版本之间的差别很少,差别主要表现在系统管理的特色工具以及软件包管理方式的不同.目录结构基本上都是一样的. Windows的文件结构是多个并列的树状结构,最顶部的是不同的磁盘(分区), ...

  8. yii2.0 中的队列

    a yii2 extension to make simple to use queue. yii2-queue让队列的使用在yii2中变得更轻松,她为各种队列组件的使用提供了一个标准的接口,您只需要 ...

  9. [转]Html position（static、relative、absolute、fixed）

    转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...

  10. OC常用函数及变量

    1.OC常用的的函数及变量 (1)算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = rand()P; ...