CSS頁(yè)面中的復(fù)選框通常用于允許用戶選擇多個(gè)選項(xiàng)，在HTML中，復(fù)選框是通過(guò)<input>元素來(lái)創(chuàng)建的，其type屬性設(shè)置為checkbox，每個(gè)復(fù)選框都有一個(gè)***的id屬性，以及一個(gè)label屬性來(lái)顯示文本標(biāo)簽。

創(chuàng)建復(fù)選框

下面是一個(gè)簡(jiǎn)單的HTML代碼示例，用于在頁(yè)面中創(chuàng)建一個(gè)復(fù)選框：

<label for="checkbox1">復(fù)選框1</label>
<input type="checkbox" id="checkbox1">
<label for="checkbox2">復(fù)選框2</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox3">復(fù)選框3</label>
<input type="checkbox" id="checkbox3">

使用CSS樣式

您可以使用CSS來(lái)定制復(fù)選框的外觀，您可以更改復(fù)選框的顏色、大小、位置等屬性，以下是一個(gè)CSS樣式示例：

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    background-color: #fff;
    position: relative;
    top: 2px;
}
input[type="checkbox"]:checked {
    background-color: #000;
}

在這個(gè)樣式中，我們定義了復(fù)選框的寬度和高度，并設(shè)置了邊框和背景顏色，我們還使用了:checked偽類來(lái)定義當(dāng)用戶選中復(fù)選框時(shí)的樣式變化。

綁定JavaScript事件

您還可以使用JavaScript來(lái)添加交互功能，例如當(dāng)用戶選中或取消選中復(fù)選框時(shí)執(zhí)行某些操作，以下是一個(gè)簡(jiǎn)單的JavaScript示例：

document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
        if (this.checked) {
            console.log('復(fù)選框被選中');
        } else {
            console.log('復(fù)選框被取消選中');
        }
    });
});

在這個(gè)示例中，我們使用了querySelectorAll方法來(lái)選擇所有的復(fù)選框，并為每個(gè)復(fù)選框添加了一個(gè)change事件監(jiān)聽(tīng)器，當(dāng)用戶選中或取消選中復(fù)選框時(shí)，我們會(huì)打印相應(yīng)的消息。