CSS表單模擬復選框是一種常用的前端開發技巧。它可以提高用戶交互體驗，使頁面操作更加友好。本文將介紹如何使用CSS來模擬復選框。

/* CSS代碼 */
input[type="checkbox"] {
display: none;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 10px;
font-size: 16px;
font-weight: 400;
color: #333;
}
label:before {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
left: 0;
top: -1px;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 3px;
}
label:after {
content: "";
display: none;
position: absolute;
left: 5px;
top: 2px;
width: 9px;
height: 2px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
transform: rotate(-45deg);
}
input[type="checkbox"]:checked + label:before {
background-color: #f7d64f;
border-color: #f7d64f;
}
input[type="checkbox"]:checked + label:after {
display: block;
}

首先，我們隱藏了復選框本身，使用label標簽來模擬。我們為label設置了position:relative，然后使用:before和:after偽元素來創建復選框的外觀。在:before中，我們設置了復選框的邊框和圓角屬性。在:after中，我們使用CSS3的transform屬性來旋轉一個45度的線條，實現了選中后的勾選效果。

最后，我們使用:checked選擇器來表示被勾選的狀態，將復選框的顏色和勾選樣式改變。

通過這個技巧，我們可以創建出漂亮的復選框，提高用戶交互體驗，增強頁面的視覺效果。希望本文對你有所幫助。