在進(jìn)行網(wǎng)頁設(shè)計時，復(fù)選框的樣式是一個常見的設(shè)計問題。默認(rèn)的樣式往往不太符合設(shè)計師的需求，但是純 CSS 可以很好地解決這個問題。

下面是一個簡單的 HTML 代碼示例，其中包含一個復(fù)選框：

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">復(fù)選框</label>

默認(rèn)情況下，復(fù)選框是由瀏覽器定義的，所以我們需要使用 CSS 來自定義復(fù)選框的樣式。下面是一些簡單的示例代碼：

input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 17px;
height: 17px;
border: 1px solid #ccc;
}
input[type="checkbox"]:checked + label::before {
background-color: #1abc9c;
}
input[type="checkbox"]:checked + label::after {
content: "\2713";
display: block;
position: absolute;
left: 3px;
top: -1px;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

在上面的代碼中，我們首先使用display: none;隱藏了默認(rèn)的復(fù)選框。然后，我們使用input[type="checkbox"] + label來選中標(biāo)簽元素，并設(shè)置了一些基本的 CSS 樣式，例如display: inline-block;和position: relative;。

接下來，我們使用input[type="checkbox"] + label::before來創(chuàng)建復(fù)選框的外觀。在這個示例代碼中，我們創(chuàng)建了一個灰色的方形邊框。當(dāng)復(fù)選框被選中時，我們使用input[type="checkbox"]:checked + label::before來添加背景色。

最后，我們使用input[type="checkbox"]:checked + label::after來添加選中符號。這里我們使用了 Unicode 符號來繪制一個勾號，并設(shè)置了顏色和字體大小。

通過這些簡單的 CSS 樣式，我們可以非常方便地改變復(fù)選框的樣式，以實現(xiàn)更好的網(wǎng)頁設(shè)計。