简易switch开关【css】

今天在用el-switch的时候遇到点小问题，然后想着自己写一个css的吧。

其实写过不知几回了，纯当记录一下。

结合switch开关的样子，其实用css实现挺简单的。

原理：

1. 相邻兄弟选择器+伪类选择器的作用
2. chebox和label

先分两个步骤：

一、先画外观

如果只是单纯画一个开和一个关：

  <div for="switcher-check" class="switcher-layer">
    <span class="switcher-point"></span>
  </div>

那只要每一个只需要：一个椭圆外壳加一个内部小圈圈，改变一下颜色，调整一下小圈圈在内部的左边距，开和关就出来了。

比如，赋予上面元素这样的css，就出来一个关按钮了。

.switcher-layer{
  cursor: pointer;
  width: 80px;
  height: 40px;
  display: block;
  border-radius: 20px;
  background-color: #aaa;
}
.switcher-point{
  width: 30px;
  height: 30px;
  display: inline-block;
  background-color: white;
  border-radius: 50px;
  margin: 5px;
}

至于开，只需要外壳改一下background-color，圈圈调一下margin-left即可

二、checkbox的伪类:checked

从第一个步骤说的实现，只要能掌控好，开关的状态和元素的样式类对应变化即可。

开关的状态好办，checkbox 当它的勾选状态由checked属性控制，但是checkbox有自己的样式，和第一部分的样式冲突咋办呢？利用label for和input的关系，把checkbox藏起来，留下label来给checkbox做门面展示，把第一部分的样式往label身上套即可。

此时关于勾选状态，那是checkbox和他家checked的事，label作为触发状态变更，那怎么让状态对应的影响label呢？

那就该相邻元素和:checked伪类选择器出场了。

且先看看html标签怎么写

<div class="switcher">
  <input id="switcher-check" type="checkbox" checked />
  <label for="switcher-check" class="switcher-layer">
    <span class="switcher-point"></span>
  </label>
</div>

关键是这里的input和label之间的相邻以及顺序，结合兄弟选择器来看样式

.switcher{
  
}
/*把input藏起来~*/
.switcher input[type="checkbox"] {
  display: none;
}
.switcher-layer{
  cursor: pointer;
  width: 80px;
  height: 40px;
  display: block;
  border-radius: 20px;
  background-color: #aaa;
  transition: background .6s;
}
.switcher-point{
  width: 30px;
  height: 30px;
  display: inline-block;
  background-color: white;
  border-radius: 50px;
  margin: 5px;
  transition: margin .6s;
}
/*checkbox勾选状态下，它兄弟换了个背景色*/
.switcher input[type="checkbox"]:checked ~ .switcher-layer{
  background-color: green;
}
/*而且兄弟家小圈还跑右边去了*/
.switcher input[type="checkbox"]:checked ~ .switcher-layer .switcher-point{
  margin-left: 45px;
}

在未选中状态下，展示标签只是一个“关”的状态，展示“关”的效果，当checkbox勾选状态下，:checked伪类生效了，和它一块的兄弟选择器收到了“呼唤”，于是就有了“开”的效果~

实例点这里

结尾

印象中相邻选择器自己用的少，但是利用相邻选择器和:checked伪类来实现状态切换确实是个不错的实践，不只checkbox，还有radio也可以，可以用来做tab切换的效果。