纯CSS+HTML自定义checkbox效果[转]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5 CSS?τ???? ?П?}</title>
<style>
.wrap {
width: 500px;
background-color: #EEE;
border: 2px solid #DEF;
}
input[type='checkbox'] {
display: none;
}
label {
display: inline-block;
width: 60px;
height: 60px;
position: relative;
margin: 20px 120px 0 20px;
background: url(../blank.png);
background-position: 0 0px;
-webkit-transition: background 0.5s linear;
}
input[type='checkbox']:checked+label {
background-position: 0 -60px;
}
label::after {
content: attr(data-name);
/* 利用attr可以减少css代码量*/
display: inline-block;
position: relative;
width: 120px;
height: 60px;
left: 100%;
vertical-align: middle;
margin: 10px;
/* line-height: 60px; */
}
</style>
</head>
<body>
<div class="divcss5">
<div class="wrap">
<input type="checkbox" id="checkbox01" />
<label for="checkbox01" data-name="点点点点"></label>
<input type="checkbox" id="checkbox02" />
<label for="checkbox02" data-name="点点点点"></label>
<input type="checkbox" id="checkbox03" />
<label for="checkbox03" data-name="点点点点"></label>
<input type="checkbox" id="checkbox04" />
<label for="checkbox04" data-name="点点点点"></label>
<input type="checkbox" id="checkbox05" />
<label for="checkbox05" data-name="点点点点"></label>
<input type="checkbox" id="checkbox06" />
<label for="checkbox06" data-name="点点点点"></label>
<input type="checkbox" id="checkbox07" />
<label for="checkbox07" data-name="点点点点"></label>
<input type="checkbox" id="checkbox08" />
<label for="checkbox08" data-name="点点点点"></label>
<input type="checkbox" id="checkbox09" />
<label for="checkbox09" data-name="点点点点"></label>
<input type="checkbox" id="checkbox10" />
<label for="checkbox10" data-name="点点点点"></label>
</div>
</div>
</body>
</html>
最新文章
- 为什么学习webdriver
- iOS 设置button中图文位置
- css.day04
- Spring自学教程-IOC、DI、AOP(二)
- [ Android 五种数据存储方式之三 ] —— SQLite存储数据
- 移动HTML5前端性能优化总结
- Java并发编程:volatile 关键字
- 《用Java写一个通用的服务器程序》01 综述
- Tomcat 设置开机自启
- 深入解析 SQL Server 高可用镜像实现原理
- Fragment生命周期与Fragment执行hide、show后的生命周期探讨
- JavaScript中两个对象数组 属性undefined
- NOT NULL constraint faile(慢就是快,少即是多)
- 微信小程序wx.uploadFile 上传文件 的两个坑
- SpringMVC Mybatis Spring
- 从vue渲染想到的数组方法
- Kong安装教程(v1.0.2)
- 【题解】Luogu P2604 [ZJOI2010]网络扩容
- mysql 主从复制change master to
- PHP简单模拟登录功能实例分享
热门文章
- 摆书 book
- 记tp5.1使用composer PhpOffice的xlsx表格文件导入数据库
- 基于DDD+微服务的开发实战(1)
- JS 浏览器BOM
- java Synchronized集合
- 10.Atomic-原子性操作
- SQL Server 2008 R2执行存储过程sp_MailItemResultSets引起大量PREEMPTIVE_OS_WAITFORSINGLEOBJEC等待
- Elasticsearch数据库 | Elasticsearch-7.5.0应用基础实战
- 本地保存cookie
- 你不可不知的WEB安全知识(第一部分:HTTPS, TLS, SSL, CORS, CSP)