在網頁設計過程中，單選按鈕和復選框是常見的表單元素。這些元素通常使用默認樣式，使它們與一般的表單輸入模式相似，但我們可以通過CSS自定義它們的樣式，以便更好地適配整個網頁的設計風格。以下是一些簡單的 CSS 技巧來自定義單選按鈕和復選框。

使用標簽屬性 :checked

input[type="radio"]:checked + label {
color: red;
}
input[type="checkbox"]:checked + label {
color: blue;
}

在上面的CSS代碼中，我們使用標簽屬性:checked來選擇被選中的單選按鈕或復選框。我們還使用相鄰兄弟選擇器 (+) 選擇它們的標簽。這樣，我們就可以通過為選中和未選中的單選按鈕/復選框定義不同的樣式來創建自定義的按鈕。

使用偽元素 :before 和 :after

input[type="radio"] + label:before {
content: "\2022";
font-size: 1.5em;
}
input[type="checkbox"] + label:before {
content: "\2714";
font-size: 1.5em;
}

另一種自定義單選按鈕和復選框的常用方法是使用偽元素:before和:after。通過這種方法，我們可以使用CSS來添加元素（例如圓點和勾號）來代替默認的按鈕樣式。

使用圖片和背景圖像

input[type="radio"] + label {
background: url(radio-unchecked.png) no-repeat;
}
input[type="radio"]:checked + label {
background: url(radio-checked.png) no-repeat;
}
input[type="checkbox"] + label {
background: url(checkbox-unchecked.png) no-repeat;
}
input[type="checkbox"]:checked + label {
background: url(checkbox-checked.png) no-repeat;
}

最后，我們也可以使用圖片和背景圖像來自定義單選按鈕和復選框的外觀。可以使用CSS的 background 屬性來實現這一點，為未選中和選中的按鈕分別定義不同的圖像/背景顏色。

以上是關于如何自定義單選按鈕和復選框的一些CSS技巧。通過這些技巧，我們可以輕松地使整個文檔的表單元素更美觀和適應文檔的整體設計。