使用CSS3制作酷炫防苹果复选框 自行测试！
<!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制作酷炫防苹果复选框 自行测试！的更多相关文章
- CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
- 纯css3简单实用的checkbox复选框和radio单选框
昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览 源码下载 ...
- jquery mobile 复选框和单选框
checkbox 和radio <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- JavaScript：复选框事件的处理
复选框事件的处理 复选框本身也是多个组件的名字相同.所以在定义复选框的同事依然要使用document.all()取得全部的内容. 范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮 ...
- excel添加复选框和去掉复选框
添加复选框 我测试的excel版本是最新版2016,所有版本都是找开发者工具里面包含很多工具呢,大家可以慢慢测试 excel的右上角 点击文件-->选项-->自定义功能区-->添加开 ...
- 纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览 源码下载 这个实例完全由css3实现 ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- 使用css3美化复选框
声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...
随机推荐
- 关于Java静态代码块、初始化块、构造函数的调用顺寻问题？
public class ClassA { public ClassA(){ System.out.println("A 构造..."); } { System.out.print ...
- JVM调优- 学习笔记（转）
http://blog.csdn.net/fenglibing/article/details/6321453 GC学习笔记 这是我公司同事的GC学习笔记,写得蛮详细的,由浅入深,循序渐进,让人一看就 ...
- IT人和普洱茶
IT人与普洱茶 作为一个平凡的IT人,在小孩眼中我就像黑客帝国的主角一样了不起:在亲戚眼中我是在写字楼做办公室吹空调的人:在朋友眼中我就是一个会写代码.掌握高科技术的人:在女友眼中我是一个在名企工作的 ...
- 9.接口BeanPostProcessor
package org.springframework.beans.factory.config; import org.springframework.beans.BeansException; p ...
- font awesome (图标字体库)
Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...
- PostgreSQL 里面的 BIGSERIAL
@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id; CREATE TABLE article( id BIGS ...
- Cordova-安装Cordova过程详细解
官方网站Apache Cordova 前提是你电脑上 1:全局安装了Node 2:全局安装了npm 3:安装了java,并配置好环境 4:下载安装好android-sdk,并配好环境,注意安卓虚拟机可 ...
- 学习Filter
http://www.cnblogs.com/jbelial/archive/2012/07/09/2582638.html Filter 介绍: 它主要用于对用户请求进行预处理,也可以对HttpSe ...
- fedora25 安装sublime text3
fedora 25安装使用 sublime text 3 安装 sublime text 3 fedora 需要选择 tarball 版本.下载后将 sublime text 3 解压后放到 opt ...
- VMware Integrated OpenStack (VIO)简介
VMware Integrated OpenStack是一款由VMware提供支持的OpenStack发行版软件,用于帮助IT在现有的VMware基础架构之上更加轻松地运行基于生产级OpenStack ...