CSS復(fù)選框是一種常用的控件，它可以讓用戶在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，由于其易用性和簡潔的界面，它被廣泛應(yīng)用在各種Web應(yīng)用中。CSS復(fù)選框有兩種狀態(tài)：未選中狀態(tài)和選中狀態(tài)，它們的樣式可以通過CSS來定義。

input[type="checkbox"] {
/* 未選中狀態(tài) */
border: 1px solid #ccc;
padding: 5px;
}
input[type="checkbox"]:checked {
/* 選中狀態(tài) */
border: 1px solid #0099FF;
background-color: #E6F2FF;
}

該代碼定義了兩個(gè)狀態(tài)下的CSS樣式。未選中狀態(tài)下的復(fù)選框有灰色邊框和5像素的內(nèi)邊距，選中狀態(tài)下的復(fù)選框有藍(lán)色邊框和淺藍(lán)色背景。其中，:checked選擇器用于匹配選中狀態(tài)的復(fù)選框。

除了上述的基本樣式，CSS還可以實(shí)現(xiàn)更加豐富的復(fù)選框效果。例如，可以使用CSS偽元素來自定義復(fù)選框的樣式：

input[type="checkbox"] {
/* 隱藏原始復(fù)選框 */
display: none;
}
input[type="checkbox"] + label::before {
/* 自定義復(fù)選框圖標(biāo) */
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
margin-right: 10px;
vertical-align: middle;
}
input[type="checkbox"]:checked + label::before {
/* 自定義選中狀態(tài)圖標(biāo) */
content: "\2713"; /* Unicode碼point里的固定字符(對(duì)勾) */
text-align: center;
font-size: 12px;
line-height: 16px;
background-color: #0099FF;
color: white;
}

該代碼定義了使用偽元素::before來為復(fù)選框添加自定義圖標(biāo)。當(dāng)用戶選中復(fù)選框時(shí)，通過:checked選擇器匹配選中狀態(tài)的復(fù)選框，并為它添加自定義選中狀態(tài)圖標(biāo)。

CSS復(fù)選框的樣式可以根據(jù)應(yīng)用需求來進(jìn)行調(diào)整，它為用戶提供了更加美觀、直觀的選擇體驗(yàn)。