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;}
}

CSS做个Switch开关相关推荐

CSS格式化、兼容及常用样式(switch开关记得收藏)
目录内容介绍一.格式化 1.select格式化样式 2.button格式化样式 3.input去除边框 4.selection去除下拉三角按钮 5.textarea隐藏右下角拖动及滚动条二.兼容 ...
html switch开关实现隐藏,css3实现switch开关效果
之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现. .switch{ d ...
手撸一个Switch开关组件
一.前言手撸系列又来了,这次咱们来撸一个Switch开关组件,废话不多说,咱们立刻发车. 二.使用效果三.实现分析首先我们先不想它的这个交互效果,我们就实现"不合格"时的一个 ...
Bootstrap Switch 开关控件
Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/ 引入. Bootstrap Switch插件和依赖插件,并初始化开关 ...
UI设计中switch开关设计总结
UI设计创新技能层出不穷,UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,今天我就针对UI设计中switch开关设计总结进行简单的说明 ...
ace admin switch 开关中英文切换
今天在开发项目的时候,遇到了ace admin switch开关切换的问题,默认的是英文,想改为中文,一开始以为是在js中控制的,可是找了很久都没有找到,后来在ace.min.css中找到了input ...
【小程序】手动实现switch开关中带文字效果（开关左右文字相同/不同都可以）
最终效果: 左右文字宽度相同左右文字宽度不同左右长度相同效果:配合wx:show切换注意:左右长度相同的话可以设置合适的相同的宽度. html: <view class="sw ...
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面官网示例可以看出文字描述在开关两边,看着很别扭. 上代码 <el-switchv-model=" ...
C语言复习第一周归纳总结（简介~switch开关语句）
一.C语言简介 1. BCPL-> New B-> C-> UNIX-> Minx -> Linux->gcc C语言诞生:1971~73年,美 ...

CSS做个Switch开关

CSS做个Switch开关相关推荐

最新文章

热门文章