CSS3自定義復選框讓我們可以自由地定義復選框的外觀，從而使網站變得更加美觀和可用性更高。

/* CSS代碼 */
input[type="checkbox"] {
display: none;
}
label {
display: inline-block;
position: relative;
padding-left: 22px;
margin-right: 15px;
margin-bottom: 10px;
cursor: pointer;
font-size: 14px;
line-height: 20px;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid #d9d9d9;
border-radius: 2px;
}
input[type="checkbox"]:checked + label:before {
content: "";
background-position: center;
background-size: 70%;
background-repeat: no-repeat;
border: none;
background-color: #fff;
background-image: url("check.png");
}

以上代碼是一個簡單的CSS樣式，使你可以創建一個自定義的復選框。

首先，通過CSS選擇器，我們將所有 input 元素中的 type 屬性的值為“checkbox”的輸入框隱藏掉，以便更改外觀。 為了使自定義復選框更好看，我們將所有的復選框項放置在一個 label 標簽中。在 label 標簽中添加了一個偽元素 :before，用于表示自定義的復選框外觀。我們可以通過樣式定義此元素，比如寬度，高度，邊距等。 當復選框選中時，我們使用:checked偽類來表示已選項。我們可以使用:checked偽類更改復選框的外觀，例如更改復選框的背景顏色和添加選中的圖標。