使用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默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...
随机推荐
- dwr文件上传
配置FileService映射: dwr.xml <create creator="new"> <param name="class" val ...
- linux系统之间基于密钥对免输入密码登陆
通常,我们登陆到一台linux主机是需要输入密码,这样可以验证登陆者的身份. 这篇随笔里面我打算记录一下配置基于ssh密钥对登陆系统.在配置之前先和大家说明一下我遇到过的问题:刚接触到linux时候首 ...
- LCD驱动程序(二)
上节我们主要是对fb_info结构体的配置,对fb_info结构体的配置主要分为一下步骤: static int lcd_init(void){ /* 1. 分配一个fb_info */ s3c_lc ...
- elasticsearch从入门到出门-02-简单的CRUD
操作背景: 电商网站上面的一个商品的增删改查: es 能接受的都是JSON格式的数据 Es 提供了一套简单的集群信息健康监控的api GET /_cat/health?v epoch t ...
- 小程序发起post请求回调成功没有数据
get请求时为 header:{ "content-type":'application/json' },POST 请求会将data的值放在Request Payload里面,而不 ...
- 【python】-- IO多路复用（select、poll、epoll）介绍及实现
IO多路复用(select.poll.epoll)介绍及select.epoll的实现 IO多路复用中包括 select.pool.epoll,这些都属于同步,还不属于异步 一.IO多路复用介绍 1. ...
- PAT 1064. 朋友数(20)
如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如123和51就是朋友数,因为1+2+3 = 5+1 = 6,而6就是它们的朋友证号.给定一些整数,要求 ...
- web前端开发-Ajax（2）
前面的一篇博文简单的简绍了Ajax基于jQuery的用法,接下来要对Ajax做进一步的介绍,Ajax请求大致可以通过三种方式发送:原生Ajax,jQuery,伪Ajax.1.原生Ajax: 由于Aja ...
- Symfony 没有找到数据库驱动An exception occured in driver: could not find driver
如果一直报这个错误, 第一,你本地没有相关的数据库驱动(mysql:-->pdo_myql,postgresql-->pdo_pgsql等); 需要执行 php -m|grep -i pd ...
- test_bdc
[转]REPORT zbdc_test_by_shir. * 定义个BDC格式的内表**************************************************DATA : B ...