css3实现checkbox变按钮
css3实现checkbox变按钮
html 如下
<!DOCTYPE HTML>
<html>
<head>
<title>css3实现checkbox变按钮 </title>
</head>
<body>
<div class='search_checkbox'>高级检索：
<input type='checkbox' id= 'switch'>
<label for='switch'>高级检索</label>
</div>
</body>
</html>
css如下
.search_checkbox{
margin: 0;
padding: 0;
margin-left: 15px;
display: inline-block;
height: 30px;
padding-top: 12px;
}
.search_checkbox input[type=checkbox]{
height: 0px;
width: 0px;
visibility: hidden;
}
.search_checkbox label{
cursor: pointer;
height: 20px;
border-radius: 10px;
display: inline-block;
background-color: gray;
width: 40px;
text-indent: -99999px;
position: relative;
}
.search_checkbox label::before {
content: '';
display:inline-block;
background-color: white;
height: 15px;
width: 15px;
position: absolute;
top: 2.5px;
left: 2.5px;
border-radius: 7px;
transition:0.3s;
}
.search_checkbox input:checked + label {
background: #bada55;
}
.search_checkbox input:checked + label:before {
left: calc(100% - 2.5px);
transform: translateX(-100%);
}
.search_checkbox label:active:before{
width:20px;
}
如有疑问请回复。
css3实现checkbox变按钮的更多相关文章
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 使用CSS3制作漂亮的按钮
我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 一款纯css3实现的翻转按钮
之前为大家介绍了好多纯css3实现的很漂亮的按钮.今天小编要给各网友再分享一款纯css3实现的翻转按钮.实现中给出了两种的翻转特效,一种是基于按扭的左边缘为中心线,另一种是基于按钮的中间为中心线.我们 ...
- html5--6-47 阶段练习2-渐变按钮
html5--6-47 阶段练习2-渐变按钮 实例 @charset="UTF-8"; .but1{ padding: 10px 20px; font-size:16px; tex ...
- css3实现逐渐变大的圆填充div背景的效果
手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足. 想到css3的scale属性,就自己来实现一下. <div id="bcd& ...
- HTML5+CSS3点击指定按钮显示某些内容效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用css3实现社交分享按钮
以前实现按钮一般都是用图片来实现的,特别是一些拥有质感的按钮,今天练习了一些相关方面的的例子,用css3来实现Social Media Buttons html代码如下 <div class=& ...
随机推荐
- node插件http-proxy实现反向代理
最近自己动手做了一个微信小程序,是直接买的腾讯云的小程序解决方案,怎么说那,用起来还是会遇到不少问题的,不过在交流群里还是会有很多人帮助你的. 闲话少说,因为要再做一个别的服务,就想直接用这台小程序的 ...
- ST 单元测试之maven安装
junit是用于单元测试的jar包,可以直接下载然后粘贴至lib目录,maven是专门的包管理工具,所以尝试安装maven. 安装maven之前需要先安装好java以及eclipse,在相应的官网下载 ...
- 摆脱printf的噩梦
众所周知,printf是一个方便.直观.易写.变长参数的打印函数,但它有一个致命的缺陷,如下的语句将导致程序出现严重的运行时错误: printf("%s", 1); 然后程序中断, ...
- Apache Flume日志收集系统简介
Apache Flume是一个分布式.可靠.可用的系统,用于从大量不同的源有效地收集.聚合.移动大量日志数据进行集中式数据存储. Flume简介 Flume的核心是Agent,Agent中包含Sour ...
- MongoDB一般安装
MongoDB一般安装 1.首先到官网(http://www.mongodb.org/downloads )下载合适的安装包,目前的最新版本为2.6 安装包有zip和msi格式的,这里推荐下载zip格 ...
- C++移位运算符详解
移位运算符包括左移"<<"和右移">>" 左移运算符<<: 1.无符号 语法格式:需要移位的数字<<移位的次数n ...
- 彻底理解容器类（2）------- AbstractCollection深入了解
h2 { background-color: Skyblue } AbstractCollection认识 AbstractCollection是Collection接口的抽象实现.实现了一部分Col ...
- 浅谈对java中传参问题的理解
之前用的c/c++比较多,在c/c++中对于传参类型,无外乎就是传值.传引用.传指针这几种.但在java中,由于没有指针类型,其传参的方式也发生了相应的变化.在网上找了找,按我之前的理解,java中传 ...
- 《Django By Example》第十二章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第十二章,全书最后一章,终于到这章 ...
- 从今天开始学习Java了
//今天第一天学习了Java的起源兴起和用途,Java的特点和优势,又重新练习了hello world, public class Hello{ public static void main(Str ...