CSS是一種用于網頁設計和美化的語言，其中包括改變網頁元素的樣式和布局等。而在實際開發中，我們經常需要更改標準HTML元素的樣式，例如更改復選框和單選框的背景樣式。這里我們就可以使用CSS代碼來實現這個效果。

首先，在HTML中需要用到input元素來創建一個復選框或單選框，其對應的type屬性分別為"checkbox"和"radio"。接著，在CSS中，我們可以通過偽類選擇器input[type="checkbox"]或input[type="radio"]來修改這兩種元素的樣式。

input[type="checkbox"],
input[type="radio"] {
/* 隱藏原生的復選框和單選框 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 添加自定義的圖標和背景樣式 */
width: 16px;
height: 16px;
background: white;
border-radius: 2px;
border: 1px solid #ccc;
position: relative;
}
/* 設置選中狀態下的樣式 */
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
background-color: #6dcff6;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}

如上所示，我們首先需要隱藏原生的復選框和單選框，這里使用了appearance屬性。接著，我們定義了一個自定義的圖標和背景樣式，包括寬度、高度、背景顏色、邊框樣式等。同時，我們還設置了這個元素的位置屬性為relative，這樣后續的絕對定位就可以相對于它來調整。最后，我們通過:before偽元素來給選中狀態添加了一個小圓點的背景樣式，同時還需要設置一些其他的樣式，例如它的位置、大小、圓角和顏色等。

通過這些CSS樣式的調整，我們就可以輕松地實現復選框和單選框的樣式更改，從而美化整個網頁的樣式。