<!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. 玩转JPA(一)---异常：Repeated column in mapping for entity/should be mapped with insert=&quot;false&quot; update=&quot;fal

    近期用JPA遇到这样一个问题:Repeated column in mapping for entity: com.ketayao.security.entity.main.User column: ...

  2. Android控件ListView获取item中EditText值

    能够明白,如今没有直接方法能够获得ListView中每一行EditText的值. 解决方式:重写BaseAdapter,然后自行获取ListView中每行输入的EditText值. 大概算法:重写Ba ...

  3. erlang 爬虫——爬取网页图片

    说起爬虫,大家第一印象就是想到了python来做爬虫.其实,服务端语言好些都可以来实现这个东东. 在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌 ...

  4. FFmpeg X264 H264编码指南[译]

    本文目标:如何创建一个高质量的H.264视频 x264 是一个 H.264 编码器. 通常有2种码率控制(rate control)模式:Constant Rate Factor (CRF) or T ...

  5. horizontalDragMaxWidth：0；就没有水平滚动条了

    jquery.jscrollpane.css JScrollPane工作所必须的基本的CSS样式.jquery.min.jsjQuery作为javascript库必须提前引入.jquery.mouse ...

  6. php_screw加密安装

    php_screw的安装与使用 1.下载:http://sourceforge.net/projects/php-screw/files/ php文件通常以文本格式存贮在服务器端, 很容易被别人读到源 ...

  7. Protobuf 语法 - 史上最简教程

    Protobuf 语法简明教程 疯狂创客圈 死磕Netty 亿级流量架构系列之12 [博客园 总入口 ] 在protobuf中,协议是由一系列的消息组成的.因此最重要的就是定义通信时使用到的消息格式. ...

  8. office2013安装/激活

    ed2k://|file|cn_office_professional_plus_2013_x64_dvd_1134006.iso|914106368|E5FBAE9EE9CB35D5E777EA78 ...

  9. Webpack探索【5】--- plugins详解

    本文主要讲plugins相关内容. https://gitbook.cn/gitchat/column/59e065f64f7fbe555e479204/topic/59e96d87a35cf44e1 ...

  10. Linux里的发消息

    1.给指定用户发送消息 语法: write 用户名 说明: 1.用户是在线的 2.执行过程 a.敲完命令按回车,进入写信模式 b.写信的时候如果写错了Ctrl+退格 删除字符 c.写完以后Ctrl+D ...