多選框（Checkbox）是網(wǎng)頁(yè)表單中常用的選項(xiàng)控件，同時(shí)也是許多網(wǎng)站中實(shí)現(xiàn)交互操作的基礎(chǔ)。為了美化多選框，我們可以使用CSS樣式來(lái)改變它的外觀，在這篇文章中，我將為大家介紹幾種常見(jiàn)的多選框CSS樣式。

/*默認(rèn)樣式*/
input[type=checkbox] {
visibility: hidden;
}
label {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
padding: 0 0 0 26px;
position: relative;
margin-right: 10px;
}
label:before {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #aaa;
background-color: #fff;
}
input:checked + label:before {
content: "?";
font-size: 16px;
color: #00a0df;
line-height: 18px;
text-align: center;
background-color: #fff;
border-color: #00a0df;
}

以上是默認(rèn)的多選框CSS樣式，包括了多選框的基本樣式和選中時(shí)的效果。接下來(lái)，我們將介紹幾個(gè)常見(jiàn)的美化多選框的方法。

/*1.圓形多選框*/
label:before {
border-radius: 50%;
}
input:checked + label:before {
background-color: #00a0df;
color: #fff;
}

以上是圓形多選框的CSS樣式，主要是通過(guò)設(shè)置邊框半徑為50%實(shí)現(xiàn)圓形效果。選中時(shí)，多選框的背景色和字體顏色改變。

/*2.方形多選框*/
label:before {
border-radius: 0;
}
input:checked + label:before {
background-color: #00a0df;
color: #fff;
}

以上是方形多選框的CSS樣式，與圓形多選框相似，但是邊框半徑設(shè)置為0，實(shí)現(xiàn)方形效果。選中時(shí)，多選框的背景色和字體顏色改變。

/*3.帶文本的多選框*/
label:after {
content: attr(data-text);
display: inline-block;
box-sizing: border-box;
margin-left: 5px;
font-size: 14px;
}
input:checked + label:before {
background-color: #00a0df;
color: #fff;
}
input:checked + label:after {
color: #00a0df;
}

以上是帶文本的多選框的CSS樣式，通過(guò)添加after偽元素實(shí)現(xiàn)文本的添加。選中時(shí)，多選框背景色和字體顏色改變，同時(shí)文本顏色也相應(yīng)改變。

總之，通過(guò)CSS樣式，我們可以靈活地美化多選框，讓網(wǎng)頁(yè)表單更好看，操作更便捷。