CSS中的Checkbox Checkbox即復選框，是網頁中常用的表單元素之一。在CSS中，Checkbox的樣式可以通過偽類和選擇器進行設置。 首先，我們給一個簡單的Checkbox添加樣式：

<input type="checkbox" name="option[]" value="1" id="checkbox1">

#checkbox1 {
width: 20px;
height: 20px;
background-color: #eee;
border-radius: 5px;
cursor: pointer;
}

上述代碼中，我們給Checkbox添加了寬高、背景色、圓角等基礎樣式，并將鼠標樣式設置為手型。 除此之外，我們也可以使用偽類對Checkbox的樣式進行更加細致的控制，例如：

<input type="checkbox" name="option[]" value="1" id="checkbox1">
<label for="checkbox1">選項1</label>

#checkbox1 {
display: none;
}
#checkbox1 + label {
display: inline-block;
width: 20px;
height: 20px;
background-color: #eee;
border-radius: 5px;
cursor: pointer;
}
#checkbox1:checked + label {
background-color: #009688;
}

上述代碼中，我們使用了“+”選擇器來選中Checkbox的相鄰兄弟元素，即它的label標簽。結合:checked偽類，我們可以讓選中的Checkbox改變樣式，例如這里的顏色。 除此之外，通過調整樣式，Checkbox還可以變成其他形態，例如開關按鈕：

<input type="checkbox" name="toggle" id="toggle">
<label for="toggle"></label>

#toggle {
display: none;
}
#toggle + label {
display: inline-block;
width: 60px;
height: 34px;
background-color: #ddd;
border-radius: 17px;
position: relative;
cursor: pointer;
}
#toggle:before {
content: "";
display: block;
width: 26px;
height: 26px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
transition: all 0.3s ease;
}
#toggle:checked + label:before {
left: 30px;
}

上述代碼中，我們通過:before偽類來添加開關按鈕的小圓點，并使用:checked偽類加上過渡效果，讓按鈕的形態更加真實。 總結來說，通過CSS，我們可以輕松地控制Checkbox的樣式，并以此創建出各種樣式獨特的表單元素。