CSS的復選框模擬可以讓我們免去使用默認的瀏覽器樣式來顯示復選框的麻煩。我們可以通過使用CSS來定義自己的樣式，來實現更加美觀和適配我們網頁風格的復選框。

/*樣式一*/
input[type="checkbox"] {
display: none;
}
.checkbox {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.checkbox::before {
content: "";
display: none;
position: absolute;
left: 5px;
top: 2px;
width: 5px;
height: 10px;
border: solid #1b1e28;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
input[type="checkbox"]:checked + .checkbox::before {
display: block;
}
/*樣式二*/
input[type="checkbox"] {
display: none;
}
.checkbox {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
.checkbox::before {
content: "";
display: none;
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
background-color: #1b1e28;
border-radius: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked + .checkbox::before {
display: block;
}

上面是兩個常用的復選框模擬樣式，它們都使用了偽元素:before來制作復選框的標記。在第一個樣式中，我們使用的是斜45度的線樣式來代表已選中，而第二個樣式則使用實心圓點來表示已選中。我們可以在這兩個樣式的基礎上，根據具體需求，進行更改和調整來達到更好的效果。