CSS自定義Switch樣式

Switch控件常常被用來開啟/關閉某種功能。而在許多UI庫中，Switch的樣式都是預定義好的，看上去相當相似。但是使用CSS我們可以實現自定義Switch的樣式，使其在頁面中具有更好的美觀性和適應性。

下面示例代碼將展示如何使用CSS來自定義Switch的樣式。

/* 將默認的checkbox控件隱藏 */
.switch input[type=checkbox] {
display: none;
}
/* 添加樣式 */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
/* 添加滑塊的樣式 */
.switch:before {
position: absolute;
content: "";
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #ccc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/* 添加開啟時的樣式 */
.switch input:checked + .slider:before {
-webkit-transform: translateX(25px);
-ms-transform: translateX(25px);
transform: translateX(25px);
}
/* 添加滑塊容器的樣式 */
.switch .slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: #ccc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/* 添加開啟時的滑塊容器的樣式 */
.switch input:checked + .slider {
background-color: #2196F3;
}

上述代碼展示了如何使用CSS來自定義Switch樣式，實現了一個簡單的Switch控件。其中，開啟和關閉時，Switch的樣式也有所不同。通過這種方式，我們可以根據需求更靈活地自定義Switch的樣式，從而在實際應用中具有更好的可擴展性。