CSS單選框和多選框是Web開發中常用的表單元素之一，也是頁面交互中不可或缺的一部分。通過CSS樣式的設置，我們可以改變單選框和多選框的外觀和交互效果，提高頁面的美觀性和用戶體驗。

/* 單選框樣式 */
/* 隱藏原生單選框 */
input[type="radio"] {
display: none;
}
/* 顯示自定義單選框 */
input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 50%;
}
/* 選中狀態樣式 */
input[type="radio"]:checked + label:before {
background-color: #000;
}
/* 多選框樣式 */
/* 隱藏原生多選框 */
input[type="checkbox"] {
display: none;
}
/* 顯示自定義多選框 */
input[type="checkbox"] + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid #ccc;
}
/* 選中狀態樣式 */
input[type="checkbox"]:checked + label:before {
content: "\2713"; /* 對勾符號 */
font-size: 16px;
line-height: 20px;
text-align: center;
background-color: #000;
color: #fff;
}

以上代碼分別是單選框和多選框的樣式設置。首先，我們將原生單選框和多選框隱藏掉，然后用:before偽元素來創建自定義標簽，并設置大小、邊框等樣式。對于選中狀態的樣式，通過:checked偽類來設置。

在使用自定義單選框和多選框時，需要將它們和label標簽綁定在一起，以實現點擊label文字也能夠選中單選框和多選框的功能。

通過這種方式，我們可以實現各種不同風格和交互效果的單選框和多選框，提高頁面的美觀性和用戶體驗。