CSS中的復(fù)選框和單選按鈕是非常常用的表單元素，它們?cè)试S用戶進(jìn)行多項(xiàng)選擇或僅選擇一個(gè)選項(xiàng)。在本文中，我們將學(xué)習(xí)如何創(chuàng)建自定義的復(fù)選框和單選按鈕。

代碼例子：
/* 定義復(fù)選框和單選按鈕的樣式 */
input[type=checkbox], input[type=radio] {
position: absolute;
left: -9999px;
}
/* 定義復(fù)選框和單選按鈕的外觀 */
input[type=checkbox] + label, input[type=radio] + label {
display: inline-block;
cursor: pointer;
padding-left: 25px;
margin-bottom: 10px;
position: relative;
}
/* 定義復(fù)選框和單選按鈕選中后的外觀 */
input[type=checkbox] + label:before, input[type=radio] + label:before {
content: '';
display: inline-block;
width: 17px;
height: 17px;
position: absolute;
left: 0;
top: 0;
border-radius: 3px;
border: 1px solid #d1d1d1;
background-color: #fff;
}
/* 定義復(fù)選框選中后的外觀 */
input[type=checkbox]:checked + label:before {
content: '\2713';
color: #fff;
background-color: #2ecc71;
text-align: center;
line-height: 17px;
}
/* 定義單選按鈕選中后的外觀 */
input[type=radio]:checked + label:before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #2ecc71;
margin-top: 4px;
margin-left: 4px;
}

在上面的代碼中，我們首先將復(fù)選框和單選按鈕的位置設(shè)置為不可見(jiàn)，然后通過(guò)label標(biāo)簽定義它們的外觀。我們還使用:before偽元素定義了它們選中后的樣式。

最后，我們應(yīng)用了:checked偽類(lèi)，用于定義它們選中后的外觀。在復(fù)選框的情況下，我們使用Unicode編碼來(lái)創(chuàng)建勾號(hào)，而在單選按鈕的情況下，我們創(chuàng)建了一個(gè)圓形來(lái)表示選中狀態(tài)。

總體而言，創(chuàng)建自定義的復(fù)選框和單選按鈕并不是很困難，只需要一些基本的CSS知識(shí)和一點(diǎn)創(chuàng)造力就可以實(shí)現(xiàn)。這些表單元素可以幫助我們提高用戶交互性和可用性，值得我們?nèi)L試。