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变按钮的更多相关文章

  1. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  2. 使用CSS3制作漂亮的按钮

    我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...

  3. 一款纯css3实现的动画按钮

    今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览    ...

  4. 纯css3实现的3D按钮

    前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  5. 一款纯css3实现的翻转按钮

    之前为大家介绍了好多纯css3实现的很漂亮的按钮.今天小编要给各网友再分享一款纯css3实现的翻转按钮.实现中给出了两种的翻转特效,一种是基于按扭的左边缘为中心线,另一种是基于按钮的中间为中心线.我们 ...

  6. html5--6-47 阶段练习2-渐变按钮

    html5--6-47 阶段练习2-渐变按钮 实例 @charset="UTF-8"; .but1{ padding: 10px 20px; font-size:16px; tex ...

  7. css3实现逐渐变大的圆填充div背景的效果

    手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足. 想到css3的scale属性,就自己来实现一下. <div id="bcd& ...

  8. HTML5+CSS3点击指定按钮显示某些内容效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 用css3实现社交分享按钮

    以前实现按钮一般都是用图片来实现的,特别是一些拥有质感的按钮,今天练习了一些相关方面的的例子,用css3来实现Social Media Buttons html代码如下 <div class=& ...

随机推荐

  1. C# 使用 USB转串 接收数据 问题

    C# 使用 USB转串 接收数据的 问题 硬件设备是MicroUSB接口,通过USB转串驱动接入PC机.自己用winForm写了一个读取串口数据的小程序,总是接收不到数据. 用传sscom32串口工具 ...

  2. gitignore文件中添加新过滤文件，但是此文件已经提交，如何解决？

    gitignore文件中添加新过滤文件,但是此文件已经提交到远程库,如何解决? 第一步,为避免冲突需要先同步下远程仓库 git pull 第二步,在本地项目目录下删除缓存 git rm -r --ca ...

  3. JAVA基础知识（1）

    1.JAVA的三大体系:JME(微缩版),JSE(标准版),JEE(企业版): 2.JAVA的三大核心机制:JAVA虚拟机,垃圾回收机制,代码安全性检测 3.java开发集JDK 4.java编译器j ...

  4. Exchange无法发送邮件 未找到匹配的连接器来路由外部收件人解决办法

    使用命令行管理程序创建发送连接器 本示例创建发送连接器,用于集线器传输服务器 HubA 向 Internet 发送电子邮件.   复制 New-SendConnector -Name "In ...

  5. 进入效果 neon

    @-webkit-keyframes neon { 0% { opacity: .3; -webkit-transform: scale(2); transform: scale(2); } 100% ...

  6. Moving to Express 4

    http://expressjs.com/guide/migrating-4.html Moving to Express 4 Overview Express 4 is a breaking cha ...

  7. 任务调度之集群（基于Quartz.net）

    上一篇我们完成了任务调度的持久化,传送门:任务调度之持久化(基于Quartz.net) 这篇我们来完成Quartz.net的一个比较优秀的功能,即集群:集群可以提高任务调度服务的容灾性, 当一个节点宕 ...

  8. 解决Highcharts 5.0.7，IE8下bar类型图表无法显示的问题

    引用如上, 当图标类型为bar时,IE8无法直接显示, 官网也一样, 但通过切换图例可以显示, 所以加入以下代码解决此问题 未经允许,严禁转载!!!

  9. OC--Runtime知识点整理

    1.Runtime简介 因为Objc是一门动态语言,所以它总是想办法把一些决定工作从编译连接推迟到运行时.也就是说只有编译器是不够的,还需要一个运行时系统 (runtime system) 来执行编译 ...

  10. Oracle DQL查询语言整理

    select * from t_hq_ryxx; select nianl, xingm from t_hq_ryxx; select nianl as 年龄, xingm as 姓名 from t_ ...