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. JAVA面试题和答案

    本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一篇将要讨论面向对象编程和它的特点,关于Java和它的功能 ...

  2. Html +++++css总结

    一. Html部分 Html定义 Hyper Text Markup Language  超文本标记语言 html 1.0  ->  html  2.0   -> ... -> ht ...

  3. RSA密码体制

    公钥算法的基本数论知识 公钥密码学中大部分引用了数论的成果,所以必要在介绍RSA密码体制之前,详细介绍一下所使用的几个数论的知识点 欧几里得算法 欧几里得算法主要是解决最大公约数问题,记两个正整数\( ...

  4. Spring之IOC详解

    学过Spring的小伙伴对于IOC一定不陌生,IOC:控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spr ...

  5. 《连载 | 物联网框架ServerSuperIO教程》- 16.OPC Server的使用步骤。附：3.3 发布与版本更新说明。

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  6. Backbone.js中的where和findWhere

    小编的公司框架用的MVC框架依旧是Backbone.js,老大说框架不重要,重要的是框架的编程思想.于是乎,小编从头开始学习Backbone.走马观花似的看了下API文档,撸起袖子就是干.但是碰到一个 ...

  7. ipconfig显示IP地址情况

    1.以太网适配器 Local Area Connection 若电脑是本地连接,则ipv4地址是本机的ip地址,默认网关一般为本机所连接路由器的地址. 2.无线局域网适配器 Wireless Netw ...

  8. android 热更新 tinker 从零开始到使用

    这几天项目完结了,闲来无事,想起来了以前研究的热更新,那个开源的只有nvwa.recoo,等,不是很好用,最近听说tinker开源一段时间了,用的人还挺多,决定研究一下! 首先进入了官方文档 http ...

  9. Windbg DUMP分析（原创汇总）

    1. 引入篇 所谓技术分享,其实是一个自我总结和相互学习.不断成长的过程. 考虑到之前原创的文章http://www.cnblogs.com/LoveOfPrince/p/6032523.html&l ...

  10. 苹果App删除 AppStore应用删除指南

    最近做IOS应用上传时,想改一下SUK或者Bundle ID ,发现改不了,只能删除. 但是删除却没有找到删除按钮,百度半天不给力,不过后来多亏一位群里的兄弟给找个链接,终于解决 今天就给他记录下来, ...