CSS自定義復選框顏色是一種常見的Web設計需求。很多網頁在設計中需要將復選框按照自己的喜好進行顏色定制，這時使用CSS樣式自定義復選框就非常方便。

下面的代碼演示了如何使用CSS來自定義復選框的顏色：

/* 未勾選中復選框的樣式 */
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
border: 2px solid #ccc;
outline: none;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
/* 勾選中復選框的樣式 */
input[type="checkbox"]:checked {
border: 2px solid #2196F3;
background-color: #2196F3;
}

在上述代碼中，我們使用了appearance屬性來禁用瀏覽器自帶的樣式，這樣我們就可以通過自己定制的CSS樣式來控制復選框的外觀。

對于未勾選中的復選框，我們使用了圓形的border-radius屬性來讓復選框更加美觀。勾選中復選框時，我們改變了邊框的顏色和背景色，使其與網頁整體設計相符合。

需要注意的是，由于不同瀏覽器支持不同的CSS屬性，所以我們需要在代碼中添加多個前綴來保證在各大瀏覽器中都能夠正確渲染。

總的來說，使用CSS自定義復選框顏色可以讓我們在網頁設計過程中更加靈活，創造出更加美觀的界面。