在CSS中，我們可以通過美化復選框來改善頁面的外觀。下面是如何寫復選框的CSS樣式。

input[type="checkbox"]{
/*隱藏原始復選框*/
display:none; 
}
input[type="checkbox"] + label{
/*美化復選框*/
display:inline-block;
cursor:pointer;
padding: 0 0 0 30px;
position:relative;
font-size:16px;
line-height:24px;
}
input[type="checkbox"] + label:before{
/*創建自定義圖標*/
content:"";
display:block;
width:24px;
height:24px;
border-radius: 50%;
border:2px solid #333;
position:absolute;
left:0;
top:0;
}
input[type="checkbox"]:checked + label:before{
/*勾選時更改圖標顏色*/
background-color:#333;
background-image: url("http://example.com/check.png");
background-size: 24px 24px;
background-position: center center;
}

該樣式包括隱藏原始復選框，使用CSS偽元素創建自定義圖標以及更改選中后的圖標樣式。如需更改圖標的大小、顏色和形狀，可以調整:before偽元素的寬度、高度和邊框半徑。如果需要添加其他動畫效果，例如淡出，可以使用CSS過渡或動畫。

使用這些CSS樣式，您可以輕松創建自定義的復選框外觀，并改善頁面的整體視覺效果。