CSS復選框是一種常用的Web界面元素。它可以用于讓用戶進行多項選擇或打勾等操作。這里我們來看一下如何使用CSS來創建復選框。

/*  基礎復選框樣式  */
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 3px;
outline: none;
cursor: pointer;
}
input[type=checkbox]:checked {
background-color: #07c;
border-color: #07c;
}
/*  自定義復選框樣式  */
input[type=checkbox].custom {
display: none;
}
input[type=checkbox].custom + label {
display: inline-block;
margin: 5px 0;
position: relative;
cursor: pointer;
}
input[type=checkbox].custom + label:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 0;
top: 0;
}
input[type=checkbox].custom:checked + label:before {
content: '\2713';
color: #fff;
font-size: 12px;
text-align: center;
line-height: 15px;
background-color: #07c;
border-color: #07c;
}

代碼中，我們首先定義了基礎復選框的樣式。我們使用了appearance屬性來去除瀏覽器默認樣式，并設置了寬度、高度、邊框等樣式。當復選框被選中時，我們設置它的背景色和邊框顏色。

然后，我們定義了一個自定義復選框的樣式。這個樣式隱藏了原本的復選框，并使用label標簽來替代它。我們設置了label的位置和樣式，并在label前添加一個偽元素:before來替代原本的復選框。當復選框被選中時，我們在:before偽元素上顯示一個勾號，并設置它的樣式。

通過這種方式，我們可以輕松地實現自定義的復選框樣式，使用戶體驗更加友好。