在開發網站時經常需要使用多選框，例如篩選條件等。在CSS中，多選框的樣式也可以被自定義，接下來我們就來學習如何寫CSS多選框。

/* 1. 隱藏默認多選框 */
input[type="checkbox"] {
display: none;
}
/* 2. 自定義多選框樣式 */
.checkbox {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border: 1px solid #ccc;
cursor: pointer;
}
/* 3. 自定義勾選樣式 */
.checkbox:after {
content: "";
display: block;
width: 3px;
height: 7px;
border: 2px solid #333;
border-top: none;
border-right: none;
transform: rotate(45deg);
position: absolute;
top: 3px;
left: 5px;
opacity: 0;
}
/* 4. 選中勾選樣式 */
.checkbox input:checked +:after {
opacity: 1;
}

解釋以上代碼：

1. 首先我們要將默認的多選框隱藏，這樣才能讓我們自定義的多選框樣式生效。

2. 我們定義了一個名為“checkbox”的class，該多選框樣式將被應用于所有多選框。該樣式包括一個寬高為16像素的方框，邊框為1像素實線灰色。我們還設置了一個事件監聽器，這樣多選框在被點擊時可以切換選中狀態。

3. 通過添加“：after”偽元素，我們將自定義勾選樣式添加到多選框中。我們創建了一個三角形勾選標記，并將其放置在多選框的中央。

4. 當多選框被選中時，我們將顯示勾選標記，因為勾選樣式的opacity屬性被設置為1。

通過以上代碼，我們就可以自定義多選框的樣式了。如果需要更改多選框被選中時勾選樣式的顏色，只需修改border-color屬性即可。