在網頁設計中，開關選擇器是很常見的功能，可以讓用戶在兩種或多種狀態之間切換。在CSS中，我們可以使用radio類型的表單控件來實現這個功能。

打開關閉

以上是基本 HTML 結構，在label標簽中，將控件的id綁定到for屬性中，這樣點擊label也可以操作控件。checked屬性用于默認選中開關開啟的狀態。接下來，我們可以使用CSS來美化開關選擇器。

input[type="radio"] {
display: none;
}
label {
display: inline-block;
cursor: pointer;
width: 60px;
height: 34px;
line-height: 34px;
text-align: center;
background-color: #eee;
border-radius: 16px;
transition: all 0.3s ease;
}
input[type="radio"]:checked + label {
background-color: #3dbb5f;
color: #fff;
}

使用display: none屬性，隱藏原生的單選框，然后將樣式應用到label標簽上。我們可以使用transition屬性制作漸變效果。input[type="radio"]:checked + label選擇器，用于選中控件后更改樣式，這里改變背景顏色和文字顏色實現開關切換的效果。

使用CSS制作開關選擇器，可以不僅僅實現基本的開關切換功能，還能通過美化提升用戶體驗。另外，也可以通過JavaScript結合CSS實現更多高級的開關選擇器效果。