CSS：利用Checked原理實現Toggle Switch

透過HTML的Checkbox，可讓使用者任意的選擇，要與不要，因此Checkbox是一個相當好用且實用的HTML元件之一，但這個Checkbox，在手機中，可以滑動式的開關鈕來作呈現，不但直觀且更好操作。
　
Checkbox 有三種狀態：未選（unselected）、已選（selected）及indeterminate。前兩個狀態比較好理解，而HTML是無法將checkbox的狀態設為indeterminate。因HTML中沒有indeterminate這個屬性，只能通過Javascript腳本來設置它。今天要透過checkbox的兩個狀態來製作Toggle Switch，

使用checkbox label來做switch開關，如下圖：

先設置一個checkbox，且id="switch"與for="switch"，這二個名稱要一致。
HTML設置如下：

<input type="checkbox" id="switch" />
<label for="switch">
    <span class="switch-txt" turnOn="On" turnOff="Off"></span>
</label>

HTML設置完後僅會顯示checkbox預設的方形框。

接著利用css將checkbox預設原有的方形框隱藏，並將label樣式修改成開關樣式。

input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

label {
	cursor: pointer;
	width: 200px;
	height: 100px;
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}

label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 90px;
	height: 90px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

<span class="switch-txt" turnOn="On" turnOff="Off"></span>
turnOn="開" turnOff="關"，設定按鈕開關閉的文字。

.switch-txt::before,
.switch-txt::after {
  display: block;
  color: #fff;
  font-weight: bold;
  box-sizing: border-box;
}
.switch-txt::before {
  content: attr(turnOn);
  color: #fff;
}
.switch-txt::after {
  content: attr(turnOff);
  color: #ccc;
}

CSS設置結果如下圖：

使用checkbox的Checked狀態來設定ON/OFF切換變色：

input:checked + label {
	background: #6f42c1;;
}

label:active:after {
	width: 130px;
}

最後再設定一點transition動畫，讓開關時更加活潑且流暢：

input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

完成結果呈現如下：


若要將預設，設為開啟時，只需在input的後方加入checked，這樣預設就會變成是開啟的狀態了。

<input type="checkbox" id="switch" checked>

圖片來源：自己截圖

文章參考：
1.CSS: Checked原理應用--Toggle Switch開關
2.透過 CSS3 就可將手機中的開關鈕效果，移植到網頁中