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. PHP无锁内存nosql---Yac的实战

    无锁内存nosql---Yac的实战 最近在工作使用了yac,所以比较了下Memcache和Yac的高并发读写性能测试,发现Yac要比Memcache快很多(这里没有比较Yac和Apc的性能情况, 不 ...

  2. cordova crosswalk android 7.0 问题

      带有crosswalk的cordova app 在Android7.0会闪退问题,为什么要crosswalk,我的回答是,还tmd不是要兼容5.0以下系统(4.4,4.2,4.0),这里省略100 ...

  3. php中数据库服务器连接类库文件的编写

    <!--数据库服务器连接类库文件的编写--> <?php class mysql{ //连接服务器.数据库以及执行Sql语句的类库 public $database; public ...

  4. java开发中获取路径的一些方式

    1.servlet开发获取WebContent(项目)的绝对路径: System.out.println(getServletContext().getRealPath("")); ...

  5. java做单用户的多重并发会话数限制

    判定条件很简单,就是在同一时刻,同一帐号仅在一个终端上可正常操作. 我这里用简单的key,value进行判定,将用户存储在map里面,新登录用户登陆进系统后,判断map里是否存在当前用户,若存在就删除 ...

  6. vuejs子组件向父组件传递数据

    子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...

  7. Oracle DQL查询语言整理

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

  8. 手机自动化培训：Appium介绍

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

  9. 基于 Spring MVC 的开源测试用例管理系统以及开发自测的实践

    早前公司领导提出让开发自测,测试么也做做开发.当然了,为了保证自测质量,测试用例仍需测试提供,所以为了提高开发自测的效率和质量,我们开发了捉虫记.捉虫记是一个完整的Spring MVC项目,现已开源, ...

  10. JavaWeb总结(二)—HttpServletResponse对象

    Web服务器收到客户端的http请求,会针对每一次的请求,分别创建一个用于代表请求的request对象和response对象.我们要获取客户端提交的数据,只需要找request对象.要向客户端输出数据 ...