css3实现checkbox变按钮
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变按钮的更多相关文章
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 使用CSS3制作漂亮的按钮
我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,sp ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 一款纯css3实现的翻转按钮
之前为大家介绍了好多纯css3实现的很漂亮的按钮.今天小编要给各网友再分享一款纯css3实现的翻转按钮.实现中给出了两种的翻转特效,一种是基于按扭的左边缘为中心线,另一种是基于按钮的中间为中心线.我们 ...
- html5--6-47 阶段练习2-渐变按钮
html5--6-47 阶段练习2-渐变按钮 实例 @charset="UTF-8"; .but1{ padding: 10px 20px; font-size:16px; tex ...
- css3实现逐渐变大的圆填充div背景的效果
手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足. 想到css3的scale属性,就自己来实现一下. <div id="bcd& ...
- HTML5+CSS3点击指定按钮显示某些内容效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用css3实现社交分享按钮
以前实现按钮一般都是用图片来实现的,特别是一些拥有质感的按钮,今天练习了一些相关方面的的例子,用css3来实现Social Media Buttons html代码如下 <div class=& ...
随机推荐
- checkSelfPermission 找不到 Android 动态权限问题
checkSelfPermission 找不到 Android 动态权限问题 最近写了一个Demo,以前好好地.后来手机更新了新系统以后,不能用总是闪退.而且我的小伙伴的是android 7.0系统 ...
- MySQL查看修改存储引擎总结
文总结了MySQL下查看.修改存储引擎的一些方法.测试.验证环境为MySQL 5.6 1:查看MySQL的存储引擎信息 1.1 使用show engines命令. .csharpcode, .csha ...
- 如何javascript获取css中的样式
obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...
- Java基础--定时任务Timer(转载)
Java基础--定时任务Timer 一.Timer介绍 java.util.Timer java.util.TimerTask Timer是一个定时器类,通过该类可以为指定的定时任务进行配置.Time ...
- EF批量插入（转）
原作者地址http://blog.csdn.net/zlts000/article/details/46385773 之前做项目的时候,做出来的系统的性能不太好,在框架中使用了EntityFramew ...
- redux核心思路和代码解析
最近在公司内部培训的时候,发现很多小伙伴只是会用redux.react-redux.redux-thunk的api,对于其中的实现原理和数据真正的流向不是特别的清楚,知其然,也要知其所以然,其实red ...
- Angular4.0.0正式版发布
来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...
- javascript . 05 json的组成、for...in 遍历对象、简单数据类型与复杂数据类型的传值与传址、内置对象
对象字面量 JSON var obj = { aaa :999}; var json={"aaa":999,"bbb":888}; "kay&quo ...
- selenium自动化--（JAVA方法写的）第一章 源代码工程的导入
1.首先打开eclipse,找到eclipse的工程窗口界面,依次找到"import-->import"功能 2.在弹出来的导入对话框中,选择导入已存在的工程"Ex ...
- 记一次搭建SS服务器，完整的过程。
前言 这几天为了登录外网查询资料,谷歌经常抽风,国外的博客也打不开,都要整崩溃了.我以前(直到昨天以前)都是使用修改hosts来访问外网的,用的是 老D(https://laod.cn/hosts) ...