在HTML網頁設計中，復選框是一個非常有用的組件，它可以讓用戶選擇一個或多個選項。但是在CSS中，我們需要對復選框進行重寫，在樣式上進行修改，以使其更加美觀、靈活和有趣。

/* 重寫復選框的基本樣式 */
input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* 在復選框旁邊生成自定義圖標 */
.checkbox-icon {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ddd;
margin-right: 10px;
}
/* 沒有選中的復選框圖標 */
.checkbox-icon:before {
content: "";
position: absolute;
display: none;
left: 5px;
top: 2px;
width: 7px;
height: 12px;
border: solid #v;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* 勾選復選框時的圖標 */
.checkbox-icon:checked:before {
display: block;
}

通過上述代碼，我們可以發現，我們將原先的復選框隱藏了，然后在其旁邊生成一個自定義的圖標，通過CSS控制圖標的樣式和變化，從而實現復選框的美觀與靈活。可以根據個人的設計喜好，自定義不同的復選框圖標樣式。