簡易switch開關【css】

今天在用el-switch的時候遇到點小問題，而後想着本身寫一個css的吧。

其實寫過不知幾次了，純當記錄一下。

結合switch開關的樣子，其實用css實現挺簡單的。

原理：

1. 相鄰兄弟選擇器+僞類選擇器的做用
2. chebox和label

先分兩個步驟：

1、先畫外觀

若是隻是單純畫一個開和一個關：

<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便可

2、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切換的效果。