<!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. zip文件压缩

    zip文件结构            上面中的每一行都是一个条目,zip文件就是由一个或者多个条目组成.      条目在Java中对应ZipEntry类       创建zip压缩文件      知 ...

  2. 在eclipse创建和myeclipse一样结构的web项目

    之前一直使用myeclipse,现在换成eclipse,但是创建的新项目让我很不习惯,下面这个方法可以解决. 创建好的项目结构如下图所示,不过看着还是很别扭,我们window→show view→ot ...

  3. 【JMeter4.0学习（一）】之FTP性能测试脚本开发，并实现上传下载功能

    参考:<Jmeter常用脚本开发之FTP请求>感谢作者:rosa2015 一.首先,搭建FTP服务器,参考地址:<[FTP]之windows8.1上搭建FTP服务器方法> 二. ...

  4. 程序员之---C语言细节19（来找茬，由/* */ 引起的凝视错误）

    主要内容:由/* */ 引起的凝视错误 有4处凝视错误 #include <stdio.h> #define N 10 //使用以下宏定义的凝视 #define BSC // #defin ...

  5. XSD文件详解

    XSD (xml Schema Definition) Xml Schema的用途 1．  定义一个Xml文档中都有什么元素 2．  定义一个Xml文档中都会有什么属性 3．  定义某个节点的都有什么 ...

  6. gulp安装教程

    1.安装nodejs并选装cnpm: npm install cnpm -g --registry=https://registry.npm.taobao.org 2.全局安装gulp: cnpm i ...

  7. 配置过滤器filter对跨站脚本攻击XSS实现拦截

    1.web.xml中配置filter [html] view plain copy   <filter> <filter-name></filter-name> & ...

  8. WINDOWS的用户和用户组说明

    1.基本用户组 Administrators 属于该administators本地组内的用户,都具备系统管理员的权限,它们拥有对这台计算机最大的控制权限,可以执行整台计算机的管理任务.内置的系统管理员 ...

  9. Python小练习(持续更新....)

    最近一直在学习python,这些小练习有些是书上的,有些是别人博客上的! # 1.题目1# 给一个字符串,统计其中的数字.字母和其他类型字符的个数:# 比如输入“124mid-=”,输出:数字=3,字 ...

  10. JQuery日记 5.11 Sizzle选择器(五)

    //设置当前document和document相应的变量和方法 setDocument = Sizzle.setDocument = function( node ) { var hasCompare ...