CSS定義復選框是一種非常常見的技巧，可以讓我們對頁面的樣式進行更好的定制和調整。下面我們來簡單介紹一下如何使用CSS定義復選框。

//定義復選框的樣式
input[type="checkbox"] {
appearance: none; //去掉默認樣式
-webkit-appearance: none; 
-moz-appearance: none;
width: 20px; //設置寬度和高度
height: 20px;
border-radius: 4px; //設置圓角
border: 1px solid #ccc; //設置邊框樣式
background-color: #fff; //設置背景顏色
outline: none; //去掉焦點邊框
margin-right: 10px; //設置與其他元素的間距
}
//定義復選框選中的樣式
input[type="checkbox"]:checked {
background-color: #55acee; //設置選中的背景顏色
border-color: #55acee; //設置選中的邊框顏色
}
//定義復選框標簽（文字）的樣式
label {
font-size: 14px;
color: #333;
cursor: pointer; //設置光標為手型
}
//將復選框與標簽進行關聯
<input type="checkbox" id="example">
<label for="example">示例</label>

上面的代碼中，我們使用了input[type="checkbox"]來定義復選框的樣式，其中使用了appearance屬性來去掉瀏覽器默認樣式，使用了border-radius屬性來設置圓角，使用了margin-right屬性來設置復選框與其他元素的間距。

同時，在復選框選中時，我們使用了input[type="checkbox"]:checked屬性對選中狀態下的樣式進行定義。我們可以通過設置不同的顏色和邊框樣式來區分不同的選中狀態。

最后，我們使用label標簽來定義復選框對應的標簽（即文字）。在與復選框關聯時，我們使用了label的for屬性來指定復選框的id，從而實現復選框和標簽的關聯。