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. JS实现购物车特效

    学习通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 1. 实现兼容低版本IE的getElementsByClassName( ...

  2. CentOS 安装mysql-5.7.10（glibc版）

    注:所有shell命令都以root用户执行. 一.下载 shell> cd /home/user/Downloads shell> wget http://mirrors.sohu.com ...

  3. HTML标签自定义属性

    本文章转载至:http://www.cnblogs.com/luoyanli/archive/2012/10/17/2727886.html HTML标签可以自定义属性,但是我们要考虑其在IE.Fir ...

  4. php文件基本操作与文件管理功能

    文件的基本操作 先来看一下PHP文件基础操作,请看强大注释 <body> <?php var_dump(filetype("./img/11.png")); // ...

  5. (19)IO流之字符流FileReader和FileWriter，缓冲字符流---缓冲输入字符流BufferedReader和缓冲输出字符流BufferedWriter

    字符流,读取的文件是字符的时候,有两个基类一个是Reader,一个是Writer这有点拟人的感觉,人直接看懂的是文字 字符流 字节流:读取的是文件中的二进制字节流并不会帮你转换成看的懂得字符 字符流: ...

  6. 将基因组数据分类并写出文件，python，awk，R data.table速度PK

    由于基因组数据过大,想进一步用R语言处理担心系统内存不够,因此想着将文件按染色体拆分,发现python,awk,R 语言都能够非常简单快捷的实现,那么速度是否有差距呢,因此在跑几个50G的大文件之前, ...

  7. 安全超文本传输协议（HTTPS）详解

    一.概念与摘要 HTTPS (Secure Hypertext Transfer Protocol)安全超文本传输协议,是一个安全通信通道,它基于HTTP开发用于在客户计算机和服务器之间交换信息.它使 ...

  8. Apache Storm 1.1.0 发布概览

    写在前面的话 本人长期关注数据挖掘与机器学习相关前沿研究.欢迎和我交流,私人微信:846731084 我自己测试了一下这个版本,总的来说更加稳定,新增的特性并没有一一测试,仅凭kafk-client来 ...

  9. python 之tornado 入门

    #!/usr/bin/env python # -*- coding:utf-8 -*- # --------------------------------------- # email : gen ...

  10. C语言 动态数组实现

    一.概述 C语言是不能直接定义动态数组的,数组必须在初始化时确定长度. 如果要在程序运行时才确定数组的长度,就需要在运行的时候,自己去向系统申请一块内存用动态内存分配实现动态数组. 二.动态内存分配函 ...