在Web開發中，有時需要在HTML頁面中添加一個多選按鈕框，以提供用戶選擇多個選項的功能。CSS可以用來定制多選按鈕框的樣式。

/* 定義多選按鈕框的樣式 */
input[type="checkbox"] {
display: none; /* 隱藏原始復選框，使用其偽元素代替 */
}
/* 多選按鈕框的基本樣式 */
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;
}
/* 標記已選中的多選按鈕框 */
input[type="checkbox"]:checked + label:before {
content: "\2713"; /* 使用Unicode字符代替原始復選框 */
text-align: center;
line-height: 20px;
color: #fff;
background-color: #999;
}
/* 多選按鈕框的鼠標懸停樣式 */
label:hover:before {
border-color: #666;
}

以上CSS代碼定義了一個基本的多選按鈕框樣式，包括選中、鼠標懸停等狀態的樣式。通過該樣式，我們可以將原始復選框隱藏，使用一個自定義的多選按鈕框代替，使頁面更美觀。