在Web開(kāi)發(fā)中，有時(shí)需要在HTML頁(yè)面中添加一個(gè)多選按鈕框，以提供用戶選擇多個(gè)選項(xiàng)的功能。CSS可以用來(lái)定制多選按鈕框的樣式。

/* 定義多選按鈕框的樣式 */
input[type="checkbox"] {
display: none; /* 隱藏原始復(fù)選框，使用其偽元素代替 */
}
/* 多選按鈕框的基本樣式 */
label {
position: relative;
display: inline-block;
padding-left: 30px;
margin-right: 10px;
cursor: pointer;
}
/* 多選按鈕框選中的樣式 */
label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 2px solid #999;
border-radius: 4px;
box-sizing: border-box;
}
/* 標(biāo)記已選中的多選按鈕框 */
input[type="checkbox"]:checked + label:before {
content: "\2713"; /* 使用Unicode字符代替原始復(fù)選框 */
text-align: center;
line-height: 20px;
color: #fff;
background-color: #999;
}
/* 多選按鈕框的鼠標(biāo)懸停樣式 */
label:hover:before {
border-color: #666;
}

以上CSS代碼定義了一個(gè)基本的多選按鈕框樣式，包括選中、鼠標(biāo)懸停等狀態(tài)的樣式。通過(guò)該樣式，我們可以將原始復(fù)選框隱藏，使用一個(gè)自定義的多選按鈕框代替，使頁(yè)面更美觀。