CSS做个Switch开关

Switch开关:

  

  

 

  根据需求可知,Switch开关只有两种选择,true或false。所以我们想到HTML的checkbox控件,用它来做。  

<input id="switch" type="checkbox" class="switch" />

  但是在浏览器中,checkbox是有固定形状的(对勾),所以我们并不能直接修改checkbox的样式。

  那我们该修改一个什么东西的样式变成开关呢?所以我们联想到 label 标签,为什么呢?因为label标签的for属性可以绑定表单控件,点击label标签,就相当于你点击了绑定的那个控件。

<label for="switch">test</label>

  

 

  废话不多说,直接上完整代码:  

复制代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/test.css" /></head><body><div class="switch-container"><input id="switch" type="checkbox" class="switch" /><label for="switch" onclick="test()"></label></div><script>var test = function(){console.log(!document.getElementById('switch').checked ? "选中" : "未选中");}</script></body>
</html>
复制代码

 

复制代码
/*开关的大小*/
.switch-container {height: 15px;width: 30px;
}/*设置checkbox不显示*/
.switch {display: none;
}/*设置label标签为椭圆状*/
label {display: block;background-color: #EEEEEE;height: 100%;width: 100%;cursor: pointer;border-radius: 25px;
}/*在label标签内容之前添加如下样式,形成一个未选中状态*/
label:before {content: '';display: block;border-radius: 25px;height: 100%;width: 15px;background-color: white;opacity: 1;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-webkit-transition: all 0.2s ease;
}/*在label标签内容之后添加如下样式,形成一个选中状态*/
label:after {position: relative;top: -15px;left: 15px;content: '';display: block;border-radius: 25px;height: 100%;width: 15px;background-color: white;opacity: 0;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-webkit-transition: all 0.2s ease;
}/* ~ 兄弟选择符。p~ul :位于 p 元素之后的所有 ul 元素
*//*选中后,选中样式显示*/
#switch:checked~label:after {opacity: 1;
}/*选中后,未选中样式消失*/
#switch:checked~label:before {opacity: 0;
}/*选中后label的背景色改变*/
#switch:checked~label {background-color: green;
}
复制代码

 

 

  如果你用了sass,可以设置变量,来改变你的开关的大小。

复制代码
$switchHeight: 30px;
$switchWidth: 60px;  /*改变大小只需要改变这个两个的值,后面会用到这两个值*/
.switch-container {height: $switchHeight;width: $switchWidth;margin-bottom: 5px;.switch {display: none;}label {display: block;background-color: #EEEEEE;height: 100%;width: 100%;cursor: pointer;border-radius: 25px;}label:before {content: '';display: block;border-radius: 25px;height: 100%;width: $switchHeight;background-color: white;opacity: 1;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-ms-transition: all 0.2s ease; /* IE 9 */-moz-transition: all 0.2s ease; /* Firefox */-webkit-transition: all 0.2s ease;/* Safari and Chrome */-o-transition: all 0.2s ease; /* Opera */}label:after {position: relative;top: -$switchHeight;left: $switchHeight;content: '';display: block;border-radius: 25px;height: 100%;width: $switchHeight;background-color: white;opacity: 0;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-ms-transition: all 0.2s ease; /* IE 9 */-moz-transition: all 0.2s ease; /* Firefox */-webkit-transition: all 0.2s ease;/* Safari and Chrome */-o-transition: all 0.2s ease; /* Opera */}#switch:checked~label:after {opacity: 1;}#switch:checked~label:before {opacity: 0;}#switch:checked~label {background-color: green;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247532.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue小记录1

1.入口index.html文件 做reset.css初始化&#xff0c;视口viewport设置 2.规范化eslint配置&#xff08;常用&#xff09; &#xff08;1&#xff09;rules -->"semi"分号 "semi":[error,alway], &#xff08;2&#xff09;indent 空格 "inde…

解决虚拟机能ping通宿主机,而宿主机不能ping通虚拟机

解决虚拟机能ping通宿主机&#xff0c;而宿主机不能ping通虚拟机 首先&#xff0c;查看宿主机的网卡状态 如果没有&#xff0c;打开虚拟机&#xff0c;选择编辑 打开虚拟网络编辑器&#xff0c;并选择更改设置 勾选将设备适配器连接此网络 完成&#xff0c;这样宿主机便可以pin…

mongo使用学习FAQ

1:mongo的集合和database区分大小写么? 在 MongoDB 中&#xff0c;数据库和集合的名称是区分大小写的。这意味着&#xff0c;数据库 MyDatabase 和 mydatabase 或集合 MyCollection 和 mycollection 会被视为不同的数据库或集合。因此&#xff0c;在操作数据库和集合时&#…

前端下载的实现

前端很多项目中&#xff0c;都有文件下载的需求&#xff0c;特别是JS生成文件内容&#xff0c;然后让浏览器执行下载操作&#xff08;例如在线图片编辑、在线代码编辑、iPresst等&#xff09;。但受限于浏览器&#xff0c;很多情况下我们都只能给出个链接&#xff0c;让用户点击…

V记录2(文档)Vue.extend构造器

1.简单介绍 Vue.extend(options) 参数&#xff1a;对象 用法&#xff1a;使用Vue构造器&#xff0c;创建一个“子类”&#xff0c;参数是一个包含组件选项的对象&#xff0c;其中,data选项中必须是函数 描述&#xff1a;Vue.extend返回的是一个“扩展实例构造器”&#xff0c;也…

在javascript中,如何判断一个被多次encode 的url 已经被decode到原来的格式?

% 而不能被无限次decodeURIComponent 可以用%来进行判断 转载于:https://www.cnblogs.com/zhouyideboke/p/11169705.html

推荐base.css

学习《编写高质量代码--Web前端开发修炼之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…

如何通过RFID开发来迎接第四次工业革命(转)

我们都经历了革命性的冲击&#xff0c;自上世纪90年代初的互联网冲击了文化和商业&#xff0c;但很少人知道如何完成RFID开发来迎接第四次工业革命&#xff0c;在接下来的二十年里&#xff0c;智能工厂的出现将成为一个重要组成部分。制造业作为我国工业的主体&#xff0c;面临…

对js数组去重的研究

1.利用es5 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ return Array.from(new Set(arr)) } console.log(unique(arr))2.通过双层循环使用splice删除 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ // return Array.from(new Se…

一些前端开发经典书籍推荐和下载链接分享

下面的这些书都是我曾看过或了解过的&#xff1a; 一.HTML 1.《HTML5权威指南》 非常全面的书&#xff0c;内容也很新&#xff0c;包含了HTML5CSS3JS DOM。 下载链接&#xff1a;http://pan.baidu.com/s/1qYGn1qW HTML我暂时没看什么书&#xff0c;学会了大部分的标签后我…

RFID图书管理系统程序源代码(转)

RFID图书管理系统程序源代码https://wenku.baidu.com/view/5f4e47f0c9d376eeaeaad1f34693daef5ef713d9.html

UOJ310 黎明前的巧克力 FWT

传送门 我们要求的是\([x^0]\prod\limits_{i1}^n (2x^{a_i}1)\)&#xff0c;其中乘积定义为集合对称差卷积。 这个直接做复杂度太高了&#xff0c;考虑优化。注意到在FWT之后&#xff0c;每一个序列中的值要么是\(3\)&#xff0c;要么是\(-1\)&#xff0c;而且这个只跟\(a_i\)有…

vue调用百度地图API

安装 $ npm install vue-baidu-map --save 全局注册 在main.js 里面引入以下代码 import BaiduMap from vue-baidu-mapVue.use(BaiduMap, {ak: 百度地图密钥AK }) 使用方法 <doc-preview><baidu-map class"map" style"display: flex; flex-direct…

mysql show processlist命令 详解

SHOW PROCESSLIST显示哪些线程正在运行。您也可以使用mysqladmin processlist语句得到此信息。如果您有SUPER权限&#xff0c;您可以看到所有线程。否则&#xff0c;您只能看到您自己的线程&#xff08;也就是&#xff0c;与您正在使用的MySQL账户相关的线程&#xff09;。请参…

JS 数据处理技巧及小算法汇总(转载)

1、根据属性来更新一个数组中的对象 const arr [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}]; //更新的值 const newValue {id: 3, score: 3} 更新数组中id为3的score值。 Es6 装逼写法如下&#xff1a; const result initial.map(x > x.id newValue.i…

让行内元素(如图片)在div中水平垂直居中 (干货)

&#xff08;1&#xff09;第一种&#xff1a;用vertical-align <div class"method1"><span class"tiptop"></span><img class"test" src"img/Dota2.jpg" alt"dota2"> </div><style> …

对Canvas的研究

1。标签定义图形&#xff0c;比如图表和其他图像&#xff0c;您必须使用脚本来绘制图形。 什么是 canvas? HTML5 <canvas> 元素用于图形的绘制&#xff0c;通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器&#xff0c;您必须使用脚本来绘制图形。 …

Vue中watch的简单应用

Vue.js 有一个方法 watch&#xff0c;它可以用来监测Vue实例上的数据变动。 如果对应一个对象&#xff0c;键是观察表达式&#xff0c;值是对应回调&#xff0c;值也可以是方法名&#xff0c;或者是对象&#xff0c;包含选项。 下面写两个demo&#xff0c;参考demo来了解一下 …

小程序中textarea点击按钮事件

textarea 的 blur 事件会晚于页面上的 tap 事件&#xff0c;如果需要在 button 的点击事件获取 textarea&#xff0c;可以使用 form 的 bindsubmit。 <view class"section"><form bindsubmit"bindFormSubmit"><textarea placeholder"f…

placeholder的兼容处理方法

placeholder是html5新增的一个属性&#xff0c;极大的减轻了表单提示功能的实现&#xff0c;但是对于IE6-IE9真的是只能靠自己写啦&#xff01; 但是在自己写时会掉进了一个坑里&#xff0c;还好用了一会时间还是爬出来啦。 最终的解决方法方法如下&#xff1a; 1 <form nam…