CSS自定義開關按鈕樣式

隨著移動端的興起，越來越多的開關按鈕出現在我們的APP和網頁中。為了讓頁面更加美觀，我們通常需要對這些開關按鈕的樣式進行一定的調整。CSS自定義開關按鈕樣式就是一個很好的解決方案。

先看一下基本的HTML代碼：

<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>

代碼解析：

label標簽的class為switch，內部包含一個checkbox和一個span，checkbox用來記錄開關狀態，span用來實現開關的滑動效果。

接下來是CSS樣式的實現：

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input { 
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

CSS解析：

首先給"label"設置一個相對定位，以便里面的內容得以相對定位。

給"input"設置"opacity: 0"，并且設置"width: 0;"和"height: 0;"，不顯示它，但是仍舊可以檢測其狀態。

對于"slider"樣式，我們給它設置"position: absolute;"和"cursor: pointer;"，然后將它的位置設置為全面積。當我們鼠標懸停在其上面，我們需要通過過渡效果將"background-color"從"ccc"變為"2196F3"，時間為".4s"，以實現開關按鈕的滑動效果。

"slider:before"樣式表示在開關按鈕的滑塊之前設置一個前綴，它的位置相對于開關按鈕的滑塊。然后將"input:checked + .slider"樣式中的"控件選中"指針事件應用到它上面，為它設置"transform: translateX(26px);"，使它相對于開關按鈕的滑塊向右移動"26px"。

最后，我們將該樣式應用到標簽"class"為"switch"的"label"中，以實現自定義的開關按鈕樣式。