CSS單選按鈕和多選框是Web開發中常見的表單元素。它們可以幫助我們收集用戶輸入的信息，并且能夠為用戶提供更好的體驗。本文將介紹如何使用CSS創建單選按鈕和多選框。

/* 單選按鈕樣式 */
input[type="radio"] {
display: none; /* 隱藏原生單選按鈕 */
}
/* 構建偽單選按鈕 */
label.radio {
cursor: pointer;
display: inline-block;
position: relative;
font-weight: bold;
margin-right: 5px;
}
label.radio:before {
content: '';
display: inline-block;
border: 1px solid #ccc;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
/* 單選按鈕選中效果 */
input[type="radio"]:checked + label.radio:before {
background-color: #007bff;
}
/* 多選框樣式 */
input[type="checkbox"] {
display: none; /* 隱藏原生多選框 */
}
/* 構建偽多選框 */
label.checkbox {
cursor: pointer;
display: inline-block;
position: relative;
font-weight: bold;
margin-right: 5px;
}
label.checkbox:before {
content: '';
display: inline-block;
border: 1px solid #ccc;
width: 10px;
height: 10px;
margin-right: 5px;
}
/* 多選框選中效果 */
input[type="checkbox"]:checked + label.checkbox:before {
background-color: #007bff;
}

通過CSS樣式，我們隱藏了原生的單選按鈕和多選框，并且構建了偽單選按鈕和偽多選框。我們需要為每個偽按鈕和偽框創建一個label元素，以便用戶可以通過點擊標簽來選中它們。我們使用:checked偽類選擇器來添加選中效果。當某個單選按鈕或多選框被選中時，我們使用CSS樣式來改變它們的背景顏色。

總之，CSS單選按鈕和多選框是易于使用和美觀的表單元素，可以方便地為您的Web應用程序提供更好的用戶體驗。