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. Android手机USB调试安全闲扯(315晚会免费充电桩事件)

    前言       今年的又准时乖巧的观看了315晚会,与大家一同学习了各种发财致富的方式...咳.咳..学习防范违法行骗的各种手段.比较感兴趣的两个,一人脸识别,二公共充电桩安全隐患.第一个今天不扯, ...

  2. IntelliJ Idea和IntelliJ webstrm 常用快捷键

    Ctrl+Shift + Enter,语句完成"!",否定完成,输入表达式时按 "!"键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shif ...

  3. 微信iOS客户端升级内核对自定义分享的影响

    上周,业务同学反应,公司的商品详情页,在有的Iphone手机上自定义分享信息失效.在自己手机上一直无法重现,在一个同事的手机上也重现了. 后来看到<微信iOS客户端将升级为WKWebview内核 ...

  4. javascript中的字符串编码、字符串方法详解

    js中的字符串是一种类数组,采用UTF-16编码的Unicode字符集,意味字符串的每个字符可用下标方式获取,而每个字符串在内存中都是一个16位值组成的序列.js对字符串的各项操作均是在对16位值进行 ...

  5. 【C++】模拟实现auto_ptr

    看了<Effctive C++>,里面提到用对象去管理资源,可以有效防止内存泄漏. 结合auto_ptr特性,稍微思考了一下,实现了一个简单的auto_ptr (因为代码量小,就不分文件了 ...

  6. 01.PHP5.x编译详解

    ##PHP5.5编译安装 ``` wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo yum i ...

  7. [SinGuLaRiTy] 字节大小

    [SinGuLaRiTy-1006] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 16位编译器 char 1个字节 char*(即指针变量 ...

  8. Oracle ASM数据库故障数据恢复过程

    一.故障描述 ASM磁盘组掉线 ,ASM实例不能mount.ASM磁盘组有4个500G的磁盘组成,数据库和ASM软件为10.2.0.1,急需恢复oracle数据库.二.故障分析   分析组成ASM磁盘 ...

  9. poptest老李谈jvm的GC

    poptest老李谈jvm的GC   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90882 ...

  10. SpringMVC基础学习(一)—初识SpringMVC

    一.HelloWorld 1.导入SpringMVC所需的jar包        2.配置web.xml      配置DispatcherServlet.DispatcherServlet默认加载/ ...