<!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. 【ubantu】在Ubuntu上安装tar.gz，tar.bz以及deb文件（例：libreoffice安装）

    参考文章: https://blog.csdn.net/zhuquan945/article/details/52986712 ==================================== ...

  2. spring boot集成activemq

    spring boot集成activemq 转自:https://blog.csdn.net/maiyikai/article/details/77199300

  3. 【python】-- GIL锁、线程锁（互斥锁）、递归锁（RLock）

    GIL锁 计算机有4核,代表着同一时间,可以干4个任务.如果单核cpu的话,我启动10个线程,我看上去也是并发的,因为是执行了上下文的切换,让看上去是并发的.但是单核永远肯定时串行的,它肯定是串行的, ...

  4. python爬虫之Selenium

    Selenium的使用 #!/usr/bin/env python # -*- coding:utf-8 -*- """ Selenium是一个第三方模块,可以完全模拟用 ...

  5. Nodejs课堂笔记—第一课：修改Webstorm的默认主题

    最近小半年一直在忙于研究Docker源码,也在写相关的分析文章.但受限于某些条件不能发布到网上,甚为郁闷.而最近几天,接到新的开发任务,需要使用nodejs.之前一直听说过nodejs,但从来没有真正 ...

  6. WebApp页面开发小结

     一 背景      公司需要开发一个web页面,需要支持主流android和ios手机,采用web页面好处是一个页面,在不同平台之间都可以用,节省成本,基本html.js和css大家也都熟悉.但是对 ...

  7. 每天一个Linux命令（34）grep命令

          grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...

  8. 每天一个Linux命令（14）head命令

    head命令用于显示文件的开头的内容.在默认情况下,head命令显示文件的头10行内容.    如果指定了多于一个文件,在每一段输出前会给出文件名作为文件头. 如果不指定文件,或者文件为"- ...

  9. socket通信——通过Udp传输方式，将一段文字数据发送出去

    需求:通过Udp传输方式,将一段文字数据发送出去 定义一个Udp发送端 思路: 1.建立updsocket服务 2.提供数据,并将数据封装到数据包中. 3.通过socket服务的发送功能,将数据包发出 ...

  10. [转]详解Java解析XML的四种方法

    XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM ...